Sassyブログ

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

GoogleMapを使ってみよう!

目次

現在、個人でWebサイト制作をやっておりアクセスページを作成した際にGoogleMapAPIを使用しました。 GoogleMapAPIを使用するのは初めてですので、備忘録としてまとめておきます。

必要なもの

APIキー取得にgoogleアカウントが必要です。
取得はこちらから

developers.google.com

まずは上記のデベロッパーサイトにて利用するサイトの登録を行います。

APIキーの利用制限は適切に行いましょう。 とりあえず今回はリファラーでテスト環境のドメインを指定して制限を掛けておきました。

サンプルコード

sample.html

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

    <body>
      <div id="map" class="center-block"></div>
      <script>
        function initMap() {
          var data = [{
            "name" : "新宿駅",
            "address" : "東京都新宿区新宿3丁目38−1",
            "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" : "東京都新宿区新宿3丁目38−1",
  "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オブジェクト作成しています。
1つであれば、上記のようにfor文で回す必要はありませんがピンを増やしたい場合はfor文で回してデータ分をMarkerオブジェクトを作成する必要があります。
今回は上記「位置情報の定義 」で掲載したサンプルコードのJSONにデータを追加していけばピンをいくつでも増やせるようにしました。

GoogleMaps APIリファレンス

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

developers.google.com

以上