カテゴリー: FrontEnd

WebページにGoogleMapを配置する

1 はじめに
2 準備
- 2.1 API Keyを取得する
3 簡単な実装
- 3.1 サンプルコード
4 タップした位置にマーカを動かす
- 4.1 サンプルコード
5 場所を検索する
- 5.1 サンプルコード
6 画面例
7 さいごに

はじめに

ページの中で特定の場所のマップを表示したい場合、Google Maps APIを利用すると簡単に表示することができます。
今回はGoogle Maps JavaScript APIを利用して東京駅周辺の地図を表示してみます。

準備

Googleマップを利用するためにはAPI Keyが必要です。

API Keyを取得する

こちらのページの「キーの取得」ボタンをタップしてキーを取得します。

ダイアログが表示されたらプロジェクト名を入力して「Yes」を選択し、「CREATE AND ENABLE API」ボタンをタップします。
その後、発行されたキーをメモします。

簡単な実装

東京駅周辺のマップを表示するページを作成してみます。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 600px;
        width: 600px;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      var map;
      var marker;
      function initMap() {
        var uluru = {lat: 35.6811673, lng: 139.7648629};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: uluru
        });
        marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

「uluru」に設定した緯度、経度を中心にマップが表示されます。
「zoom」に設定した値によりマップの拡大度合いが変化します。

タップした位置にマーカを動かす

画面タップ時のコールバック関数を定義して、クリックした場所にマーカを移動させてみます。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 600px;
        width: 600px;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      var map;
      var marker;
      function initMap() {
        var uluru = {lat: 35.6811673, lng: 139.7648629};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: uluru
        });
        marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

      // 追加
      function mapEventListener(event) {
        marker.setPosition(event.latLng);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

場所を検索する

入力した文字を元に場所を検索してみます。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 600px;
        width: 600px;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div>
      <input id="search_address" style="display: inline; width: 70%;" name="event[address]" required="required" type="text" value="" />
    </div>
    <div style="padding: 1em 0em 1em;">
      <button id="search_btn" name="button" type="submit">検索</button>
    </div>
    <div id="map"></div>
    <script>
      var map;
      var marker;
      function initMap() {
        var uluru = {lat: 35.6811673, lng: 139.7648629};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: uluru
        });
        marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
        google.maps.event.addListener(map, 'click', mapEventListener);
      }

      function mapEventListener(event) {
        marker.setPosition(event.latLng);
      }

      // 追加
      function geoResultCallback(result, status) {
        if (status != google.maps.GeocoderStatus.OK) {
          alert(status);
          return;
        }
        var latlng = result[0].geometry.location;
        map.setCenter(latlng);
        if (marker != null) {
          marker.setMap(null);
        }
        marker = new google.maps.Marker({position:latlng, map:map, title:latlng.toString(), draggable:true});
        // マーカーのドロップ（ドラッグ終了）時のイベント
        google.maps.event.addListener(marker, 'dragend', mapEventListener);
      }

      // 追加
      $('#search_btn').on('click', function(event) {
        event.preventDefault();
        var req = {
          address: $('#search_address').val(),
        };
        geo = new google.maps.Geocoder();
        geo.geocode(req, geoResultCallback);
      });
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>