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を取得する

簡単な実装

サンプルコード

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

サンプルコード

場所を検索する

サンプルコード

画面例

さいごに

フォロー

アプリ情報