はじめに
ページの中で特定の場所のマップを表示したい場合、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> varmap; varmarker; functioninitMap(){ varuluru={lat:35.6811673,lng:139.7648629}; map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:17, center:uluru }); marker=newgoogle.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> varmap; varmarker; functioninitMap(){ varuluru={lat:35.6811673,lng:139.7648629}; map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:17, center:uluru }); marker=newgoogle.maps.Marker({ position:uluru, map:map }); } // 追加 functionmapEventListener(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> varmap; varmarker; functioninitMap(){ varuluru={lat:35.6811673,lng:139.7648629}; map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:17, mapTypeId:google.maps.MapTypeId.ROADMAP, center:uluru }); marker=newgoogle.maps.Marker({ position:uluru, map:map }); google.maps.event.addListener(map,'click',mapEventListener); } functionmapEventListener(event){ marker.setPosition(event.latLng); } // 追加 functiongeoResultCallback(result,status){ if(status!=google.maps.GeocoderStatus.OK){ alert(status); return; } varlatlng=result[0].geometry.location; map.setCenter(latlng); if(marker!=null){ marker.setMap(null); } marker=newgoogle.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(); varreq={ address:$('#search_address').val(), }; geo=newgoogle.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数が多くない場合は無料でも十分使えると思います。