• WEB

Google Maps API~基本編~

  • いまこ
    いまこ システムちーむ
  • このエントリーをはてなブックマークに追加
Google Maps API~基本編~

こんにちは、システムちーむのいまこです。

もう少しで入社して1年になります。
新卒で全くプログラムができない状態でしたが、優しい先輩方に様々なことを教えてもらい、何とかやって来れました。
まだまだ知識不足ではあるのですが。。。

さて、今回は「Google Maps API~基本編~」ということで、Google Maps APIの基本的な使い方について書いていこうと思います。

Mapの表示

とりあえず、Mapを表示させてみましょう!

HTML (index.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/map.js"></script>
    <title>googlemap</title>
</head>
<body>
    <!-- Map表示個所 -->
    <div id="map" style="width:680px; height:380px"></div>
</body>
</html>

JavaScript (map.js)


// onload処理
google.maps.event.addDomListener(window, 'load', function() {
    // Map設定
    var map = document.getElementById("map");
    var centerPosition = new google.maps.LatLng(40.822331, 140.747438);
    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Mapの出力
    new google.maps.Map(map, options);
});

結果

デモページへ

表示されましたね。

簡単な解説

Maps APIの読み込み

JavaScriptを読み込むことでGoogle Maps APIが使用できるようになります。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

HTML内でMap表示場所を指定

id部分をJavaScriptで使用します。
Mapの大きさを変えることもできます。


<center><div id="map" style="width:550px; height:550px"></div></center>

座標位置の作成

インスタンスを生成し、変数に代入します。
※これからの説明では、座標の設定を全て「centerPosition」と表します


// 第1引数 緯度
// 第2引数 経度
var centerPosition = new google.maps.LatLng(40.822331, 140.747438);

Mapのオプション


// zoom 初期ズーム値
// center Map中央値(先ほど生成した座標のインスタンスを使用)
// mapTypeId Mapのタイプ
var options = {
    zoom: 16,
    center: centerPosition,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapTypeId Mapのタイプについては、詳しくはこちらをご参照ください。
マップタイプを指定

Map出力処理

インスタンスを生成します。


// 第1引数 HTMLで指定したidのエレメント
// 第2引数 作成したMapのオプション
new google.maps.Map(map, options);

マーカーの表示

では次にマーカーを表示してみましょう!

JavaScript (map.js)


// onload処理
google.maps.event.addDomListener(window, 'load', function() {
    // Map設定
    var map = document.getElementById("map");
    var centerPosition = new google.maps.LatLng(40.822331, 140.747438)
    var map_options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Mapの出力
    var myMap = new google.maps.Map(map, map_options);

    // マーカー設定
    var marker_options = {
        position: centerPosition,
        map: myMap,
    };
    // マーカーの出力
    new google.maps.Marker(marker_options);
});

結果

デモページへ

マーカーが表示されましたね。

簡単な解説

表示されているMap情報の取得

先ほどと違い、インスタンスの生成とともに変数に代入します。
代入された変数が、表示されているMap情報で、これを使用してMapをカスタマイズすることができます。


var myMap = new google.maps.Map(map, map_options);

マーカーの設定


// position : マーカーの座標
// map : 表示マップ
var marker_options = {
    position: centerPosition,
    map: myMap,
};

マーカーの出力処理

引数にマーカーのオプションを指定し、
インスタンスを生成します。


new google.maps.Marker(marker_options);

マーカークリック時のイベント

最後にマーカークリックのイベントについてです!

infowindowの表示

  • ズーム
  • 中心に移動

以上をマーカークリック時に行います。

JavaScript (map.js)


// onload処理
google.maps.event.addDomListener(window, 'load', function() {
    // Map設定
    var map = document.getElementById("map");
    var centerPosition = new google.maps.LatLng(40.822331, 140.747438)
    var map_options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Mapの出力
    var myMap = new google.maps.Map(map, map_options);

    // マーカー設定
    var marker_options = {
        position: centerPosition,
        map: myMap,
    };
    // マーカーの出力
    var myMarker = new google.maps.Marker(marker_options);

    // マーカークリック処理
    google.maps.event.addListener(myMarker, 'click', function(event) {
        // infowindowの設定
        var window_options = {
            content: '青森市役所です',
        }
        var infowindow = new google.maps.InfoWindow(window_options);
        // infowindowの表示
        infowindow.open(myMap, myMarker);

        // zoom設定
        myMap.setZoom(18);

        // 中心に移動
        myMap.panTo(centerPosition);
    });
});

結果

デモページへ

簡単な解説

表示されているマーカー情報の取得

先ほどのMap情報取得と同様に、インスタンスを変数に代入します。


var myMarker = new google.maps.Marker(marker_options);

クリックイベント


// 第1引数 イベント発生の対象(今回はマーカーのインスタンス)
// 第2引数 イベント発生のタイミング(今回はクリック時)
// 第3引数 イベント発生時に行う処理
// マーカーがクリックされた時に※1の処理が実行されます。
google.maps.event.addListener(myMarker, 'click', function(event) {※1}

infowindowの表示

インスタンスを生成し、openメソッドを使用してinfowindowを表示させます。
HTMLのタグがそのまま使えるため、「content」に画像を設定することも可能です。


var window_options = {
    content: '青森市役所です',
}
var infowindow = new google.maps.InfoWindow(window_options);
infowindow.open(myMap, myMarker);

ズーム設定

Mapのインスタンスを指定し、setZoomメソッドを使用します。
引数にズーム値を設定します。


myMap.setZoom(18);

中心に移動

Mapのインスタンスを指定し、panToメソッドを使用します。
引数に、座標を指定します。


myMap.panTo(centerPosition);

終わりに

本当に基本的なことだけを書かせていただきました。
調べると細かい設定で色々できることがあるので、是非調べてみてください。

次回はGoogle Maps APIでAjaxを使用したMapの切り替えについて書こうと思っています。
よかったら次回も見てください。

続編を書きました。
Google Maps API PHPとAjaxを使ったマップの切り替え
このエントリーをはてなブックマークに追加

いまこが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ