位置情報: 地図上にユーザーやデバイスの位置を表示する

概要

このチュートリアルでは、ブラウザの HTML5 Geolocation 機能と Maps JavaScript API を併用して、デバイスの地理的位置を Google マップ上に表示する方法を説明します。地理的位置は、ユーザーが現在値の共有を有効にしている場合のみ表示されます。

ユーザーが位置情報リクエストをトリガーすると、デバイスの位置情報へのアクセスに対する同意を求めるプロンプトがブラウザに表示されます。リクエストに失敗した場合は、位置情報の利用許可が拒否されていることや、デバイスが所在地を確認できなかったことが原因として考えられます。この機能は、一部の対応ブラウザで、安全なコンテキスト（HTTPS）でのみ利用できます。

以下は、ユーザーのデバイスの現在地を特定できる地図です。

以下のサンプルは、この地図の作成に必要なコード全体を示しています。

TypeScript

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        },
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

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

window.initMap = initMap;
index.js
サンプルを表示

サンプルを試す

位置情報とは

位置情報とは、さまざまなデータ収集メカニズムによって、コンピューティング デバイスの地理的位置を特定することです。通常、ほとんどの位置情報サービスでは、ネットワークのルーティング アドレスや内蔵 GPS チップを使用してこの位置を判断します。位置情報は、デバイス固有の API です。つまり、ウェブ アプリケーションで Geolocation API を使用するには、ブラウザまたはデバイスが位置情報をサポートしている必要があります。

W3C Geolocation 規格

位置情報サービスを実行するアプリは、W3C Geolocation 規格に対応している必要があります。上記のサンプルコードでは、W3C navigator.geolocation API を使ってデバイスの現在地を判断しています。

ウェブサイトでは、デバイスの場所を検出するために IP アドレスを使用することがありますが、その場合に得られる位置情報は大まかな推定値になる可能性があります。W3C 標準 API はサポート状況が最も万全で、精度も最も高いため、他の位置情報取得方法よりも優先してください。