Google Maps JavaScript Api 現在位置を取得するサンプル (Geolocation API)

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>

以上、試してみてください。