JavaScript | Google Maps API
ここでは、HTML + CSS + JavaScriptによる
Google Map の活用サンプルを紹介します。
2016年6月22日より、GoogleマップのAPIの利用にはAPIキーの取得が必須になりました。またアクセス件数にも制限があります。以下のサイトからAPIキーを取得して、ソースに記載することが必要です(Googleアカウントが必要です)。
https://developers.google.com/maps/web/
キーはHTMLのソースコードから見えてしまいます。これを他に利用されないようにするためには、以下のGoogle API コンソールで、当該プロジェクトのキーの認証情報を確認し、このキーを使用できるウェブサイト、IP アドレス、またはアプリを指定して、キーを制限する必要があります。
https://console.developers.google.com/apis/
最近のブラウザでは、個人情報保護の観点から「http 接続では位置情報の取得を認めない」というかたちに仕様が変更されています。iMac OSX のSafariでは、システム環境設定で位置情報サービスをオンにする必要があるなど、動作確認には様々な条件をクリアする必要があります。
事例 地図上に現在位置を表示
GeolocationAPIを使って、現在位置を取得。GoogleMap上に表示します。
- 位置情報取得の許可を求めるメッセージが出ますので、「許可」を選択して下さい。
お使いの環境によっては、正常に動作しません。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=[YOUR API KEY]"></script> <script type="text/javascript" src="sample.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Sample Page</title> </head> <body> <div id="map_canvas"> </div> <div id="pos">lat, lng</div> </body> </html>
style.css
#map_canvas { width: 480px; height: 640px; }
ソース内のYOUR API KEYの部分に、あなたが取得したAPIキーを書く必要があります。https://developers.google.com/maps/web/
sample.js
var gmap,gmarker; window.onload = function(){ var defPos = new google.maps.LatLng(35, 135); gmap = new google.maps.Map(document.getElementById("map_canvas"), { zoom : 17, center : defPos, mapTypeId : google.maps.MapTypeId.ROADMAP }); gmarker = new google.maps.Marker({ positon : defPos, map: gmap, icon : "arrow.png" }); navigator.geolocation.watchPosition(update); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var currentPos = new google.maps.LatLng(lat, lng); gmap.setCenter(currentPos); gmarker.setPosition(currentPos); document.getElementById("pos").innerHTML = lat+","+lng+"<br>"+(new Date()); }
- 補足
- coordinates:座標
- latitude:緯度
- longitude:経度
GoogleMap 公式情報
- 以下のページに Google Maps JavaScript API の活用サンプルがあります。
https://developers.google.com/maps/documentation/javascript/
- 以下にシンプルで埋め込み可能、コードは最小限の活用サンプルがあります。
https://developers.google.com/maps/documentation/static-maps/