はじめに
ページの中で特定の場所のマップを表示したい場合、Google Maps APIを利用すると簡単に表示することができます。
今回はGoogle Maps JavaScript APIを利用して東京駅周辺の地図を表示してみます。
準備
Googleマップを利用するためにはAPI Keyが必要です。
API Keyを取得する
こちらのページの「キーの取得」ボタンをタップしてキーを取得します。
ダイアログが表示されたらプロジェクト名を入力して「Yes」を選択し、「CREATE AND ENABLE API」ボタンをタップします。
その後、発行されたキーをメモします。
簡単な実装
東京駅周辺のマップを表示するページを作成してみます。
サンプルコード
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 32 33 | <!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」に設定した値によりマップの拡大度合いが変化します。
タップした位置にマーカを動かす
画面タップ時のコールバック関数を定義して、クリックした場所にマーカを移動させてみます。
サンプルコード
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 32 33 34 35 36 37 38 | <!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> |
場所を検索する
入力した文字を元に場所を検索してみます。
サンプルコード
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!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> |
画面例
最後に、これまでに記載した内容を実際にこのページに組み込んでみました。
テキストボックスにキーワードを入力して「検索」ボタンをクリックするとマップが更新されます。
さいごに
Google Maps JavaScript APIを利用してWebページにGoogleMapを配置してみました。
無料で取得できるAPI Keyの場合1日あたりの表示回数に制限がありますが、PV数が多くない場合は無料でも十分使えると思います。
