Google Maps JavaScript Apiを利用し、
Google Map上に現在位置を示すサンプルを紹介します。
HTML5のGeolocation API機能により、ユーザーの位置情報を所得し、
Google Maps JavaScript Apiを利用し、現在地がマーカーで示されます。
このような形で表示できます。
サンプル
まずは動作サンプルを確認してください。
セッティング
マップの利用にはAPIキーの取得が必要です。
APIキーの取得方法に関しては、こちらの記事が参考になりました。
http://bashalog.c-brains.jp/17/08/25-200000.php
さらに、Google Maps JavaScript Apiは、SSL認証されているURLでなければ表示できないようです。
表示するURLはhttps://で始まるURLにしてください。
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtWBXpjCFNqK_HdRP-eTYI0B2PjLJYEAM"></script>
html
現在位置を取得というボタンを押すと、マップが出現します。
<p><button onclick="getMyPlace()">現在位置を取得</button></p> <div id="result"></div> <div id="map" style="width:100%;height:300px;"></div>
javascript
Google Mapsに書き出しと、マーカーの出力という、シンプルなコードになります。
<script>
function getMyPlace() {
var output = document.getElementById("result");
if (!navigator.geolocation){//Geolocation apiがサポートされていない場合
output.innerHTML = "<p>Geolocationはあなたのブラウザーでサポートされておりません</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;//緯度
var longitude = position.coords.longitude;//経度
output.innerHTML = '<p>緯度 ' + latitude + '° <br>経度 ' + longitude + '°</p>';
// 位置情報
var latlng = new google.maps.LatLng( latitude , longitude ) ;
// Google Mapsに書き出し
var map = new google.maps.Map( document.getElementById( 'map' ) , {
zoom: 15 ,// ズーム値
center: latlng ,// 中心座標
} ) ;
// マーカーの新規出力
new google.maps.Marker( {
map: map ,
position: latlng ,
} ) ;
};
function error() {
//エラーの場合
output.innerHTML = "座標位置を取得できません";
};
navigator.geolocation.getCurrentPosition(success, error);//成功と失敗を判断
}
</script>
以上、試してみてください。
