ラボ > Javascript関連：Google関連、Google関連：Google APIs

javascript 現在地の緯度・経度取得（GPS機能、GooglAPI）のソース

作成日:2018-03-02, 更新日:2018-03-26

位置情報が取得できない場合「http」と「https」を確認。
Chromeなど、ブラウザによっては「http」で位置情報取得NGという仕様にしているそうだ。
※localhostだったらhttpでも取得可能だったりする

if (navigator.geolocation) {
  // Geolocation APIに対応している
  alert("この端末では位置情報が取得できます");
}
else {
  // Geolocation APIに対応していない
  alert("この端末では位置情報が取得できません");
}

// 現在地取得処理
function getPosition() {
  // 現在地を取得
  navigator.geolocation.getCurrentPosition(
    // 取得成功した場合
    function(position) {
      alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
    },
    // 取得失敗した場合
    function(error) {
      switch(error.code) {
        case 1: //PERMISSION_DENIED
          alert("位置情報の利用が許可されていません");
        break;
        
        case 2: //POSITION_UNAVAILABLE
          alert("現在位置が取得できませんでした");
        break;
        
        case 3: //TIMEOUT
          alert("タイムアウトになりました");
        break;
        
        default:
          alert("その他のエラー(エラーコード:"+error.code+")");
        break;
      }
    }
  );
}

Geolocation APIでPCやスマホの位置情報を取得する

カスタマイズ（2018/03/06）

上記のヤツでも問題ないけど・・・アンドロイド端末の標準ブラウザでGPS機能をOFFにしていると反応が無い。
エラーログを出力させたくても出てこないし・・・。

調べるとタイムアウトのオプションがあったので追加した。
ついでに緯度・経度を言われても正しいかどうかが分かんないので地図に出力させるように追加修正
※地図出力が絡むので「https://maps.googleapis.com/maps/api/js」を読み込む。

タイムアウトを設定しないとひたすら待ち続けるという仕様らしい。

<script src="https://maps.googleapis.com/maps/api/js?key=自身でAPIのキーを取得する必要あり"></script>
<script>
if (navigator.geolocation) {
  // Geolocation APIに対応している
  alert("この端末では位置情報が取得できます");
}
else {
  // Geolocation APIに対応していない
  alert("この端末では位置情報が取得できません");
}

// 現在地取得処理
function getPosition() {
  var optCurPos = {
     'enableHighAccuracy': true,   // true:精度を高める。false:デフォルト値
     'timeout':    8000,           // 位置情報の取得にかかる時間の上限 (ミリ秒) 。デフォルト値は「Infinity」でひたすら待つ
     'maximumAge': 2000            // キャッシュ済みの位置情報の有効期限 (ミリ秒) 。デフォルト値は「0」で常に最新の位置情報を取得
  };
  
  // 現在地を取得
  navigator.geolocation.getCurrentPosition(
    function(position) {
      // 取得成功した場合
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      
      alert("緯度:" + lat + ",経度" + lng);
      
      // ▼地図出力させる
      // 位置情報
      var latlng = new google.maps.LatLng(lat, lng);
      
      var mapOpt = {
         zoom: 15,       // ズーム値
         center: latlng, // 中心座標 [latlng]
      };
      
      // Google Mapsに書き出し：「<div id="map-canvas"></div>」に地図出力：高さ指定は必要。
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOpt);
      
      // マーカーの新規出力
      var marker = new google.maps.Marker({
         map: map,
         position: latlng,
      });
      // ▲地図出力させる
    },
    function(error) {
      // 取得失敗した場合
      switch(error.code) {
        case 1: //PERMISSION_DENIED
          alert("位置情報の利用が許可されていません");
        break;
        
        case 2: //POSITION_UNAVAILABLE
          alert("現在位置が取得できませんでした");
        break;
        
        case 3: //TIMEOUT
          alert("タイムアウトになりました。GPS機能がOFFになっている場合は、ONにしてください");
        break;
        
        default:
          alert("その他のエラー(エラーコード:"+error.code+")");
        break;
      }
    },
    optCurPos
  );
}</script>

javascript 現在地の緯度・経度取得（GPS機能、GooglAPI）のソース

カスタマイズ（2018/03/06）

関連項目