【Google Maps API】位置情報の取得と表示について

GoogleMapsApi

Google Maps APIを使用すると、Webアプリケーションやモバイルアプリケーションに位置情報機能を簡単に組み込むことができます。この記事では、Google Maps APIを用いて位置情報を取得し、その位置を地図上に表示する方法について、初心者向けに分かりやすく説明します。

位置情報の取得方法

位置情報を取得するには、JavaScriptのnavigator.geolocationオブジェクトを使用します。このオブジェクトの、ユーザーの現在の位置を取得するためのメソッドはgetCurrentPositionです。これを使用することで、ユーザーの現在の位置の緯度と経度を取得できます。

参考：
Geolocation: getCurrentPosition() メソッド - Web API | MDN (mozilla.org)

■htmlファイル

<!DOCTYPE html>
<html>
<head>
  <title>Geolocation の例</title>
  <script src="script.js"></script> 
</head> 
<body>
 <h1>Geolocation の例</h1>
 <p>現在位置です</p>
</body> 
</html>

■javascript

htmlファイルと同じディレクトリにscript.jsファイルを作成します。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
  alert("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  alert("Latitude: " + lat + "\nLongitude: " + lng);
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
  }
}

2行目：ユーザーの位置情報を取得します。成功した場合は、showPosition関数を実行します。エラーの場合は、showError関数を実行します。
10行目：ユーザーの位置情報の緯度と経度をアラートで表示しています。
14行目：位置情報の取得に失敗した場合のエラーハンドリングを行っています。

実行と確認

ファイルの設定が完了したら、ブラウザでHTMLファイルを開いて現在位置の緯度経度が表示されることを確認します。

navigator.geolocation.getCurrentPosition

Google Maps APIを用いた地図の表示

次に、Google Maps APIを使用して地図を表示し、取得した位置情報をその地図上に表示する方法について説明します。

まず、Google Maps APIのスクリプトをHTMLファイルに追加します。以下のように、Google MapsのJavaScript APIを読み込むスクリプトタグを追加します。

■htmlファイル

<!DOCTYPE html>
<html>
<head>
  <title>現在位置取得</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_ API_KEY"></script>
  <script src="script.js"></script> 
  <style>
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
    width: 100%;
  }
</style>
</head> 
<body>
  <div id="map"></div>
</body> 
</html>

YOUR_ API_KEYにはご自分の取得したAPIキーを入力します。

次に、取得した位置情報を地図上に表示するJavaScriptコードを記述します。地図を表示するためにinitMap関数を定義し、位置情報を取得してその位置にマーカーを配置します。

■javascriptファイル

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById("map"), {
    zoom:14,
  });

  // ユーザーの位置情報を取得
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function (position) {
        var userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };

        // 地図の中心をユーザーの位置に設定
        map.setCenter(userLocation);

        // ユーザーの位置にマーカーを配置
        var marker = new google.maps.Marker({
          position: userLocation,
          map: map,
          title: "現在位置",
        });
      },
      function () {
        handleLocationError(true, map.getCenter());
      }
    );
  } else {
  // ブラウザがGeolocationに対応していない場合
  handleLocationError(false, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, pos) {
  var infoWindow = new google.maps.InfoWindow({
  map: map,
});
infoWindow.setPosition(pos);
infoWindow.setContent(
  browserHasGeolocation
    ? "Error: The Geolocation service failed."
    : "Error: Your browser doesn't support geolocation."
  );
}

上記のコードでは、initMap関数内で地図を初期化し、navigator.geolocation.getCurrentPositionメソッドを使用してユーザーの位置情報を取得しています。位置情報が取得できたら、その位置を地図の中心に設定し、マーカーを配置しています。また、位置情報の取得に失敗した場合には、エラーメッセージを表示するようにしています。

実行と確認

ファイルの設定が完了したら、ブラウザでHTMLファイルを開いて現在位置にマーカが表示されることを確認します。

googlemapsapi

位置情報の更新

ユーザーが移動した場合に位置情報を自動的に更新し、地図上のマーカーも更新する方法について説明します。これを実現するには、navigator.geolocation.watchPositionメソッドを使用します。このメソッドは、ユーザーの位置情報が変化するたびにコールバック関数を実行します。

■htmlファイル

先ほどと同じファイルを使用します。

■javascriptファイル

var map;
var marker;

function initMap() {

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
  });

  // ユーザーの位置情報を取得
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(
      function (position) {
        var userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };

        // 地図の中心をユーザーの位置に設定 
        map.setCenter(userLocation);

        if (!marker) {
          marker = new google.maps.Marker({
            position: userLocation,
            map: map,
            title: "Your Location",
          });
        } else {
          marker.setPosition(userLocation);
        }
      },
      function () {
        handleLocationError(true, map.getCenter());
      }
    );
  } else {
    handleLocationError(false, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, pos) {
  var infoWindow = new google.maps.InfoWindow({
  map: map,
});
infoWindow.setPosition(pos);
infoWindow.setContent(
  browserHasGeolocation
    ? "Error: The Geolocation service failed."
    : "Error: Your browser doesn't support geolocation."
  );
}

上記のコードでは、watchPositionメソッドを使用してユーザーの位置情報を監視し、位置が変わるたびに地図の中心とマーカーの位置を更新しています。初回の位置情報取得時にはマーカーを作成し、以降は位置情報が変わるたびにマーカーの位置を更新するようにしています。

緯度・経度の逆ジオコーディング

取得した緯度・経度を人間が読みやすい住所に変換する方法についても触れておきます。これを逆ジオコーディングと呼び、Google Maps Geocoding APIを使用します。

■htmlファイル

先ほどと同じファイルを使用します。

■javascriptファイル

function geocodeLatLng(geocoder, map, infowindow, lat, lng) {
  var latlng = { lat: lat, lng: lng };
  geocoder.geocode({ location: latlng }, function (results, status) {
    if (status === "OK") {
      if (results[0]) {
        map.setZoom(14);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert("No results found");
      }
    } else {
      window.alert("Geocoder failed due to: " + status);
  }
});
}

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
  });

  var geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function (position) {
        var userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };

        // 地図の中心をユーザーの位置に設定 
        map.setCenter(userLocation);
        geocodeLatLng(geocoder, map, infowindow, userLocation.lat, userLocation.lng);
      },
      function () {
        handleLocationError(true, map.getCenter());
      }
    );
  } else {
    handleLocationError(false, map.getCenter());
  }
}

window.onload = initMap;

このコードでは、geocodeLatLng関数を追加し、取得した緯度・経度を住所に変換して情報ウィンドウに表示しています。位置情報を取得した後にこの関数を呼び出し、地図上に住所を表示します。

実行と確認

ファイルの設定が完了したら、ブラウザでHTMLファイルを開いて現在位置にマーカが表示され、インフォウインドウに住所が表示されることを確認します。

googlemapsapi

まとめ

今回は、位置情報の取得方法、取得した位置情報の地図上への表示方法、位置情報の更新方法、そして逆ジオコーディングの方法について詳しく説明しました。

タイトルとURLをコピーしました