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>

<!DOCTYPE html>

<html>

<head>

<style>

#map {

height: 600px;

width: 600px;

}

</style>

</head>

<body>

<h3>My Google Maps Demo</h3>

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>

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>

<!DOCTYPE html>

<html>

<head>

<style>

#map {

height: 600px;

width: 600px;

}

</style>

</head>

<body>

<h3>My Google Maps Demo</h3>

<div>

</div>

</div>

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>

画面例

最後に、これまでに記載した内容を実際にこのページに組み込んでみました。
テキストボックスにキーワードを入力して「検索」ボタンをクリックするとマップが更新されます。

さいごに

Google Maps JavaScript APIを利用してWebページにGoogleMapを配置してみました。
無料で取得できるAPI Keyの場合1日あたりの表示回数に制限がありますが、PV数が多くない場合は無料でも十分使えると思います。

日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

WebページにGoogleMapを配置する

はじめに

準備

API Keyを取得する

簡単な実装

サンプルコード

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

サンプルコード

場所を検索する

サンプルコード

画面例

さいごに

フォロー

アプリ情報