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>
以上、試してみてください。