ここでは、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());
}