Google Mapのリファレンスサイト

マップに独自のスタイルを読み込む

·

ぽち

Google Maps では、自分だけの見た目（スタイル）を設定した「地図デザイン」を表示することができます。


手順の全体像

Google の公式スタイルエディタでデザインを作成。Google Cloud Console で「マップID」を作成してスタイルを紐づける
最後にAPIキーとマップIDを使って地図を表示する

1.地図スタイルを作成する

Google Maps Platform Styling Wizard にアクセスして、独自の地図スタイルを作成します。

ベースとなるテーマを選ぶ（例：Silver, Retro, Night など）

地図の各要素（道路、ラベル、水面など）を自由にカスタマイズ

完成後、「Finish」ボタンを押して保存

ここでは「スタイルJSON」をエクスポートするわけではなく、「スタイルID」として保存する


2.Google Cloud Console でマップIDを作成・スタイルと紐づけ

Google Cloud Console → マップID にアクセス

「マップIDを作成」をクリック

名前を入力し、「スタイルの種類」は ベクターマップ を選ぶ

「カスタムスタイル」に先ほど作成したスタイルを選択

作成すると「マップID（例：NNNNNNNNNNNNNN）」が発行される




3.地図を表示するコード（例）

<div id="map" style="height: 400px;"></div>

<script>
  function initMap() {
    const tokyo = { lat: 35.681236, lng: 139.767125 };
    const map = new google.maps.Map(document.getElementById("map"), {
      center: tokyo,
      zoom: 15,
      mapId: "XXXXXXXXXXXXXXXXX", // 作成したマップID
      mapTypeControl: false,
      zoomControl: false,
      streetViewControl: false,
      fullscreenControl: false,
    });
  }
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&map_ids=作成したマップID">
</script>

スタイル反映でエラーになった部分。
上記の例で説明すると、9行目に「mapId: “XXXXXXXXXXXXXXXXX”, // 作成したマップID」があり、19行目で「map_ids=作成したマップID」がある。
スタイルによっては9行目だけで表示される場合、9行目と19行目を設定しないと表示されない場合があり、関係性について、不明。スタイル反映されない場合には、それぞれのアリナシをテストしてみてください。

地図のインタラクション制御（ドラッグ無効など）

ユーザーの操作を制限したい場合（例：ドラッグ・ズーム禁止）、gestureHandlingや個別のフラグを設定することで制御できます。
たとえば、地図のスクロール・ズームをすべて無効にするには以下のように記述します。

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 35.681236, lng: 139.767125 },
  zoom: 15,
  gestureHandling: "none",
  zoomControl: false,
  draggable: false,
});

地図の再描画やサイズ変更時の対応（resize）

地図を表示するコンテナ（divなど）のサイズが動的に変わる場合、そのままでは地図が正しく表示されないことがあります。
このような場合、Google Mapsのresizeイベントを使って、明示的に再描画する必要があります。

google.maps.event.trigger(map, "resize");

特に、タブ切り替えやモーダル表示内で地図を使う場合は、この処理を加えることで表示崩れを防げます。

表示されない場合の確認のポイント

現象原因
スタイルが反映されないmapId の指定ミス or &map_ids= がスクリプトにない
スタイルが選べないマップID作成時に「カスタムスタイル」が未設定
エラーになるAPIキーとマップIDの連携ができていない（制限設定の確認）