JavaScriptで現在地を取得してGoogleマップを移動させる｜Geolocation API実装ガイド

<!-- =========================
  現在地取得デモ：HTML構造
  （Googleマップ＋現在地ボタン＋ステータス表示）
========================= -->
<!-- 地図を表示するコンテナ -->
<div id="map" class="map"></div>

<!-- ステータス表示領域（メッセージをJavaScriptで更新） -->
<div class="status-wrapper">
  <p id="status" class="status">「現在地へ移動」を押してください。</p>
</div>

<!-- 現在地を取得して地図を移動させるボタン -->
<button id="btn" class="btn" type="button">現在地へ移動</button>

<!--
  Google Maps JavaScript API の読み込みスクリプト
  - key: Google Cloud で発行した API キーを指定してください
  - v: 利用するバージョン。特に理由がなければ "weekly" のままで大丈夫です
  この読み込みで、JavaScript 側から google.maps.importLibrary(...) が使えるようになります
-->
<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
  });
</script>

/* =========================
  地図表示エリア
  - 幅は親要素に追従
  - 高さは固定（レスポンシブ対応）
========================= */
.map {
  height: 400px;
}

/* スマホ画面では高さを少し低く */
@media (max-width: 767px) {
  .map {
    height: 300px;
  }
}

/* =========================
  現在地ドット（AdvancedMarkerElement内のcontent）
  - 青い点＋白い縁取りで視認性を確保
========================= */
.my-location-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a73e8; /* 青（Googleマップ風） */
  box-shadow: 0 0 0 3px #fff; /* 白い外枠で地図上でも見やすく */
}

/* ドットの外側に広がる波紋アニメーション */
.my-location-dot::after {
  content: "";
  display: block;
  position: absolute;
  inset: -6px; /* 外側へ6px広げる */
  border: 2px solid rgba(26, 115, 232, .35);
  border-radius: 50%;
  animation: pulse 1600ms ease-out infinite;
}

/* 波紋の拡大アニメーション */
@keyframes pulse {
  0% { transform: scale(0.8); opacity: .8; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* =========================
  ステータス表示
  - 成功・失敗を色分けで強調
========================= */
.status-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.status {
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 767px) {
  .status {
    font-size: 15px;
  }
}

/* 強調テキスト（成功／失敗） */
.status strong {
  font-weight: 700;
}

.status strong.is-success {
  color: #15803d; /* 緑（成功メッセージ） */
}

.status strong.is-error {
  color: #b91c1c; /* 赤（エラーメッセージ） */
}

/* =========================
  「現在地へ移動」ボタン
  - 見た目と操作感のスタイル定義
========================= */
.btn {
  display: block;
  margin: 20px auto 0;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  background: #c11a51;
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 300ms;
}

@media (max-width: 767px) {
  .btn {
    padding: 15px 25px;
  }
}

@media (min-width: 768px) {
  .btn:hover {
    background: #890631;
  }
}

/* 無効状態（位置情報取得中） */
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* =========================
  現在地を取得してマップ上に表示するデモ
  - importLibrary を使った最新のGoogle Maps API仕様対応
========================= */
(async () => {
  // Cloud Consoleで発行したMap ID
  const MAP_ID = "YOUR_MAP_ID";

  // 各要素の参照を取得
  const mapEl = document.getElementById("map");
  const statusEl = document.getElementById("status");
  const btnEl = document.getElementById("btn");

  try {
    // 必要なライブラリを読み込み（importLibraryは2025年現在の最新の書き方）
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

    /* =========================
      地図の初期設定
      - 東京駅を中心に地図を生成
      - 不要なUIは非表示にしてシンプルに
    ========================= */
    const map = new Map(mapEl, {
      zoom: 15,
      center: { lat: 35.681236, lng: 139.767125 },
      mapId: MAP_ID,
      zoomControl: true, // ズームボタン（+ / -）を表示
      cameraControl: false, // 新UI（上下左右のカメラ移動）を非表示
      mapTypeControl: false, // 地図 / 航空写真の切替を非表示
      scaleControl: false, // 縮尺バー（1kmスケールなど）を非表示
      streetViewControl: false, // ストリートビューアイコン（人型）を非表示
      clickableIcons: false // ランドマークや建物クリック時の吹き出しを無効化
    });

    // 現在地マーカーの参照用（初回以降の更新に使う）
    let userMarker = null; // AdvancedMarkerElement

    /* =========================
      「現在地へ移動」ボタンのクリック処理
    ========================= */
    btnEl.addEventListener("click", () => {
      // このブラウザが Geolocation API（位置情報を取得する機能）に対応しているかを確認
      // 対応していない場合は、この時点で処理を終了
      if (!("geolocation" in navigator)) {
        statusEl.textContent = "このブラウザは位置情報に対応していません。";
        return;
      }

      btnEl.disabled = true; // 二重クリック防止
      statusEl.textContent = "現在地を取得しています…";

      /* =========================
        位置情報の取得処理
        - 成功時：マップを現在地に移動＋マーカー設置
        - 失敗時：エラー内容を表示
      ========================= */
      navigator.geolocation.getCurrentPosition(
        // 成功時
        (pos) => {
          const { latitude, longitude } = pos.coords;

          // 地図を現在地へ移動・ズーム
          map.panTo({ lat: latitude, lng: longitude });
          map.setZoom(15);

          // 一度押した後に再度ボタンを押した場合、前回のマーカーを消してから新しいマーカーを追加
          if (userMarker) userMarker.map = null;

          // 現在地ドットを作成して配置
          const dot = document.createElement("div");
          dot.className = "my-location-dot";

          // AdvancedMarkerElement: 地図上に表示するマーカーを作る機能。
          // HTMLで見た目を自由にカスタマイズできる。
          userMarker = new AdvancedMarkerElement({
            map, // 表示する対象の地図オブジェクト
            position: { lat: latitude, lng: longitude }, // マーカーを置く緯度経度（= 現在地）
            content: dot, // カスタムマーカーの中身（HTML要素）
            collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
            // 重なり時の表示優先度：他のラベル等よりこのマーカーを優先表示
          });

          // 緯度経度を小数点6桁で表示
          statusEl.innerHTML = `<strong class="is-success">取得成功：</strong>緯度 ${latitude.toFixed(6)}、経度 ${longitude.toFixed(6)}`;
          btnEl.disabled = false;
        },

        // 失敗時
        (err) => {
          let message = "";

          // エラーコードごとにメッセージを出し分け
          if (err.code === err.PERMISSION_DENIED) {
            message = "位置情報の利用が拒否されました。ブラウザの設定で許可してください。";
          } else if (err.code === err.POSITION_UNAVAILABLE) {
            message = "位置情報を取得できませんでした（信号なし/機内モードなど）。";
          } else if (err.code === err.TIMEOUT) {
            message = "タイムアウトしました。電波状況を確認して再試行してください。";
          } else {
            message = "不明なエラーが発生しました。";
          }

          // 取得失敗メッセージを表示
          statusEl.innerHTML = `<strong class="is-error">取得失敗：</strong>${message}`;
          btnEl.disabled = false;
        },

        // 取得オプション：できるだけ高精度で現在地を取得（最大10秒待ち、キャッシュは使わない）
        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
      );
    });

  } catch (e) {
    // Maps APIの読み込みエラーなど
    statusEl.textContent = "Googleマップの読み込みに失敗しました。";
  }
})();

navigator.geolocation.getCurrentPosition(success, error, {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 0
});

const { Map } = await google.maps.importLibrary("maps");

const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

const map = new Map(mapEl, {
  zoom: 15,
  center: { lat: 35.681236, lng: 139.767125 },
  mapId: MAP_ID,
  zoomControl: true, // ズームボタン（+ / -）を表示
  cameraControl: false, // 新UI（上下左右のカメラ移動）を非表示
  mapTypeControl: false, // 地図 / 航空写真の切替を非表示
  scaleControl: false, // 縮尺バー（1kmスケールなど）を非表示
  streetViewControl: false, // ストリートビューアイコン（人型）を非表示
  clickableIcons: false // ランドマークや建物クリック時の吹き出しを無効化
});

const dot = document.createElement("div");
dot.className = "my-location-dot";

userMarker = new AdvancedMarkerElement({
  map, // 表示する対象の地図オブジェクト
  position: { lat: latitude, lng: longitude }, // マーカーを置く緯度経度（= 現在地）
  content: dot, // カスタムマーカーの中身（HTML要素）
  collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
  // 重なり時の表示優先度：他のラベル等よりこのマーカーを優先表示
});

btnEl.disabled = true; // 二重クリック防止
statusEl.textContent = "現在地を取得しています…";

statusEl.innerHTML = `<strong class="is-success">取得成功：</strong>緯度 ${latitude.toFixed(6)}、経度 ${longitude.toFixed(6)}`;
btnEl.disabled = false;

if (err.code === err.PERMISSION_DENIED) {
  message = "位置情報の利用が拒否されました。ブラウザの設定で許可してください。";
} else if (err.code === err.POSITION_UNAVAILABLE) {
  message = "位置情報を取得できませんでした（信号なし/機内モードなど）。";
} else if (err.code === err.TIMEOUT) {
  message = "タイムアウトしました。電波状況を確認して再試行してください。";
} else {
  message = "不明なエラーが発生しました。";
}

// 取得失敗メッセージを表示
statusEl.innerHTML = `<strong class="is-error">取得失敗：</strong>${message}`;
btnEl.disabled = false;