GoogleMapを使ってみよう！

<!DOCTYPE html>
  <html>
    <head>
    ・・・
    </head>

    <body>
      <div id="map" class="center-block"></div>
      <script>
        function initMap() {
          var data = [{
            "name" : "新宿駅",
            "address" : "東京都新宿区新宿３丁目３８−１",
            "label" : "A",
            "lat" : 35.696285,
            "lng" : 139.6962717
          }];

        var opts = {
          zoom: 17,
          center: new google.maps.LatLng(data[0].lat, data[0].lng)
        };
        var map = new google.maps.Map(document.getElementById("map"), opts);

        for(var i = 0; i < markerData.length; i++){
          new google.maps.Marker({
            position: new google.maps.LatLng(data[i].lat, data[i].lng),
            title: data[i].name,
            label: data[i].label,
            map: map
          });
        }
      }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=<span style="color: #d32f2f">[API_KEY]</span>&amp;callback=initMap" async="" defer=""></script>

    </body>
  </html>

サンプルコード解説

ライブラリの読み込み

まずは、以下の記述でライブラリの読み込みを行います。

<script src="https://maps.googleapis.com/maps/api/js?key=<span style="color: #d32f2f">[API_KEY]</span>&amp;callback=initMap" async="" defer=""></script>

asyncとdeferがありますが、これはHTMLパースに影響を与えない用に並行してJSライブラリを読み込み、HTML パース後JSを実行させます。

コールバック関数の定義

次に、「ライブラリの読み込み」でcallback=に設定されている「initMap」を定義します。

function initMap() {
・・・
}

これでJSが読み込まれたあとにinitMap()が自動的に呼ばれます。
そのため、このinitMap()関数内にMapの表示処理を記述していけばよいわけです。

位置情報の定義

var data = [{
  "name" : "新宿駅",
  "address" : "東京都新宿区新宿３丁目３８−１",
  "label" : "A",
  "lat" : 35.696285,
  "lng" : 139.6962717
}];

地図上に表示するピン情報です。
データ構造をJSONで表現しています。

Map情報の定義

var opts = {
  zoom: 17,
  center: new google.maps.LatLng(data[0].lat, data[0].lng)
};

LatLngオブジェクトに緯度と経度情報を設定して、Mapオブジェクトに設定するためのデータを作成します。

Mapインスタンスの生成

var map = new google.maps.Map(document.getElementById("map"), opts);

Mapオブジェクトを生成して、htmlに記述したid="map"と「Map情報の定義」で作成したoptsを設定しています。

Mapインスタンスに定義情報を設定

for(var i = 0; i < markerData.length; i++){
  new google.maps.Marker({
    position: new google.maps.LatLng(data[i].lat, data[i].lng),
    title: data[i].name,
    label: data[i].label,
    map: map
  });
}

マップ上にピンを表示するためのMarkerオブジェクト作成しています。
１つであれば、上記のようにfor文で回す必要はありませんがピンを増やしたい場合はfor文で回してデータ分をMarkerオブジェクトを作成する必要があります。
今回は上記「位置情報の定義」で掲載したサンプルコードのJSONにデータを追加していけばピンをいくつでも増やせるようにしました。

GoogleMaps APIリファレンス

色々試してみたい場合は以下のリファレンスにサンプルもあるのでどのようなことができるかを確認して見るのもいいかと思います。

developers.google.com

以上

Sassyブログ

好きなことで暮らしを豊かにするブログ