8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 13

PERSOL CROSS TECHNOLOGY Advent Calendar 2025

@inacyc_kinパーソルクロステクノロジー株式会社

GoogleMapをReactで実装してみたお話

8
Posted at

はじめに

今回はGoogleマップをreactで実装します。Googleマップと一言で言っても、地図描写タイプ、回転やズームなどの地図操作などなど実装方法はたくさんです。
その中でも学びになった部分をピックアップしてご紹介します。全ての機能はご紹介ではないことご承知おきください。それではさっそく！

まずはGoogleMapで遊んでみる

今回実装したいGoogleMapです。拡大ズームはもちろん、レイヤーを変更できたり、回転もできます。（PC操作の場合、航空写真＋Ctrlキーを押下しながらの操作）
実装しながら、どういう動きができるのかなぁとかまずは触ってみる、確認のために使ってみる、イメージを掴むために利用してみるのはいかがでしょうか！

地図の動かし方参照：【GoogleMAP】2025最新｜PC版グーグルマップを回転させる方法

準備

GoogleMapを利用するにあたり必要になる情報を発行、取得します。
事前にGoogleアカウントの発行を行う必要があります。本記事ではGoogleアカウントの作成は対象外とします。

①Googleマップ API Keyの作成

GoogleMapへのアクセス認証としてAPI Keyの取得を行います。料金計算の管理や使用制限などを設定することができます。

APIKey作成にあたり、クレジットカードの登録が必要になりますが、無料枠内で動作確認は可能です。
無料枠としてマップの読み込み1万回が含まれています。また90日間はすべての Cloud プロダクトに使用できる $300 分のクレジットも付与されています。
実業務およびそれ以上のAPI呼び出しを行う場合は料金プランをご確認ください。

手順

  1. 自身のGoogleアカウントへログインし、Google Maps Platform > 認証情報 ページへ遷移し、利用規約へ同意を行う。

  2. 新規プロジェクトの作成を行う。任意のプロジェクト名、任意の組織名とする。

  3. Google Maps Platform のアカウント設定登録を行う。（住所・クレジットカードの登録が必須です

  4. APIキーを取得する。
    正常に登録が完了すると、自分のAPIキーが生成、表示されます。今後の実装に必要となるためメモしておきましょう。

    「このプロジェクトですべてのGoogleMapsAPIを有効にします」のチェックボックスからチェックを外すとAPIごとにつける制限とは別に、プロジェクト単位で制限をかけることができます。

    今回ウェブアプリ用に動的でインタラクティブな地図を表示するにはMaps JavaScript APIが有効である必要があります。
    右上がEnable→Disable状態が有効状態。

  5. API制限の設定を行う。
    不正利用防止、セキュリティ向上のため、APIキーの利用に対し制限を設定することができます。指定のWebサイトやIPアドレス、ネイティブアプリなどアクセスアプリケーションの制限や、利用できるAPIを設定することができます。

    こちらの設定はあとでも設定、修正可能です。今回はMaps JavaScript APIのみの制限とします。

②MapIDの作成

MAPIDとは、Google マップのスタイル設定と構成設定を表す一意の識別子です。
地図表示のみであれば必須ではありませんが、今回はベクターマップ（Web GLを用いたマップ）や自作マーカーを実装しますので、作成をします。
ほかにも、地図スタイルの紐付け、ネイティブアプリ向けの機能の利用ができるようになります。

手順

1.自身のGoogleアカウントへログインし、Google Maps Platform > マップ管理よりマップIDを作成を選択。

2. 任意の名前、説明を記載し、地図の種類を選択する。

地図の種類は実装先の「Javascript」、今回は地図を回転させたり描写を加えたりするため、「ベクター地図」を選択する。

ラスター地図とベクター地図の違いについて

＜ラスター地図＞
・サーバー側で生成された画像（ピクセル）として配信される
・従来型の地図表示方式
・回転や傾斜などの3D操作には対応していない

＜ベクター地図＞
・クライアント側（ブラウザ）でWebGLを使ってリアルタイムに描画される
・ユーザーのデバイスのGPUを活用するため、滑らかな動作が可能
・地図の回転、傾斜、3D表示などの高度な機能に対応

ライブラリ選定

Google MAPをreactで実装するにあたり、ライブラリを利用するととても簡単に実装できます。
今回は@vis.gl/react-google-mapsライブラリを利用し、実装します。実装例やドキュメントが公式サイトでまとめられており、実装イメージがつきやすいです。

インストールは以下のコマンドを実行します。
（コマンドは実行環境に合わせ変更してください）

pnpm add @vis.gl/react-google-maps

パラメータの説明

パラメータを設定しながら画面へどのように表示されるのかを確認していきます。以降は、Center値を東京駅、Zoom値を12と設定したものを基本設定値とします。

地図操作設定

renderingType

地図をラスター地図にするかベクター地図にするかを設定します。MapIDで設定した地図の種類をオーバーライドすることが可能です。

  • 型: RenderingType
  • デフォルト: RenderingType.VECTOR
  • 例: renderingType={RenderingType.RASTER}

mapId

地図のMap IDを設定します（準備で作成・設定した値）。カスタムスタイルや高度な機能を使用する際に必要です。

  • 型: string
  • 例: mapId={"hogehoge"}

gestureHandling

地図の操作の制御を設定します。アプリケーションの一部に地図を組み込む場合、ページスクロールや意図しない操作による地図操作が起きないようにするための設定です。

  • 型: string（使用できる値）
    • cooperative:2本の指でタッチ操作、またはCtrlキーまたは⌘キーを押しながらで地図操作できる。
    • greedy:すべてのタッチで地図操作できる。
    • none:地図操作を不可にする。
    • auto:<iframe>で埋め込まれた地図の場合はcooperative、そうでない場合はgreedy
  • デフォルト: auto
  • 例: gestureHandling={"cooperative"}
  • 実装例: cooperativeの場合
    a.gif

地図デザイン

mapTypeId

  • 型: string

    • roadmap:道路や建物をビュー表示します
    • satellite:Google Earthの衛星画像を使用しビュー表示します
    • hybrid:Google Earth 衛星写真に道路の透明なレイヤを追加した複合ビュー表示します
    • terrain:地形情報に基づいたビュー表示します

  • デフォルト: roadmap

  • 例: mapTypeId={"satellite"}

  • 実装例: mapTypeId値をroadmapとした場合

  • mapTypeId値をterrainとした場合

  • mapTypeId値をsatelliteとした場合

  • mapTypeId値をroadmapとした場合

disableDefaultUI

ユーザーが地図を使用できるようにするUIの表示を一括で設定します。それぞれ個別にUIの表示を設定することも可能です。地図のサイズが 200 x 200 ピクセル未満の場合は、デフォルトですべてのコントロールが非表示になります

  • 型: boolean

  • デフォルト: false

  • 各種類:

    • zoomControl:地図の拡大/縮小ボタン
    • cameraControl:地図の上下左右移動ボタン
    • mapTypeControl:地図デザイン切り替えボタン
    • scaleControl:地図縮尺表示
    • streetViewControl:ストリートビューボタン
    • rotateControl:地図回転ボタン（航空写真時のみ）
    • fullscreenControl:全画面表示切り替えボタン

  • 例: disableDefaultUI={true}

  • 実装例: 全てのUIを表示した場合

keyboardShortcuts

キーボードで地図を操作可能かどうかの設定をします。

  • 型: boolean
  • デフォルト: true
  • 例: keyboardShortcuts={false}

reuseMaps

キャッシュの有効を設定します。

こちらはライブラリ@vis.gl/react-google-mapsの実験的な機能です。
不具合が起きる場合がある旨ご了承ください。

  • 型: boolean
  • デフォルト: false
  • 例: reuseMaps={true}

地図表示設定

中心座標の設定

center

地図の中心を示す緯度経度を設定します。center値はマップ操作で変化します。
center値をハードコーディングすると、中心位置が固定化されてしまうため、地図操作で移動することはできません。

  • 型: LatLng | LatLngLiteral
  • 例: center = { lat: 35.6809591, lng: 139.7673068 }（東京駅）
  • 実装例: Center値を東京駅とした場合
defaultCenter

初期表示時の地図の中心を示す緯度経度を設定します。レンダリング時、center = defaultCenterに設定されるイメージです。

  • 型: LatLng | LatLngLiteral
  • 例: defaultCenter = { lat: 35.6809591, lng: 139.7673068 }（東京駅）
  • 実装例: center値項目と同様

ズーム

zoom

地図のズームレベルを設定します。Zoom値はマップ操作で変化します。

  • 必須/任意: 任意

  • 型: number

  • 範囲: 0（世界全体を1つの地図に表示）から21+（道路や個々の建物まで表示）

  • 例: zoom = { 15 }

  • 実装例: Zoom値を0とした場合

  • 実装例: Zoom値を10とした場合

  • 実装例: Zoom値を99.9とした場合(最大値21+で表示)

defaultZoom

初期表示時のズームレベルを設定します。レンダリング時、'zoom' = 'defaultZoom'に設定されるイメージです。

  • 型: number
  • 範囲: 0から21＋
  • 例: defaultZoom = { 10 }
  • 実装例: zoom値項目と同様

角度（Heading）

こちらはベクター地図機能です。renderingTypeをVECTORへ設定ください。

heading

地図の時計回りに回転する角度を設定します。地図の上が東西南北どれになるかみたいなイメージです。

参照：GoogleMapにおけるカメラ位置

  • 型: number

  • 範囲: 0〜360

  • 例: heading = { 90 }

  • 実装例: heading値を90（上が東）とした場合

  • 実装例: heading値を270（上が西）とした場合

defaultHeading

初期表示時の回転角度を設定します。レンダリング時、heading = defaultHeadingに設定されるイメージです。

  • 型: number
  • 範囲: 0〜360
  • 例: defaultHeading = { 90 }
  • 実装例: heading値項目と同様
headingInteractionEnabled

地図がベクタータイプの場合、ユーザーによるカメラの回転を有効にするかの設定です。

  • 型: boolean
  • デフォルト: false
  • 例: headingInteractionEnabled={true}

傾斜（Tilt）

こちらはベクター地図機能です。renderingTypeをVECTORへ設定ください。

tilt

地図の傾斜角度を設定します。表示したい位置に対するカメラの角度をどうするかみたいなイメージです。

  • 型: number

  • 範囲: 0〜(Zoom値により変動)

  • 例: tilt = { 45 }

  • 実装例:Zoom値を15、tilt値を0(地点の真上)とした場合

  • 実装例:Zoom値を15、tilt値を60(地点の斜めの角度)とした場合

defaultTilt

初期表示時の傾斜角度を設定します。レンダリング時、tilt = defaultTiltに設定されるイメージです。

  • 型: number
  • 範囲: 0〜(Zoom値により変動)
  • 例: defaultTilt = { 45 }
  • 実装例: tilt値項目と同様
tiltInteractionEnabled

地図がベクタータイプの場合、ユーザーによる傾斜操作を有効にするかの設定です。

  • 型: boolean
  • デフォルト: false
  • 例: tiltInteractionEnabled={true}

実装方法

上記紹介したパラメータは以下のコンポーネントの引数として受け渡すことができます。

<Map
    // 初期値
    defaultZoom={10}
    defaultCenter={{ lat: 35.6809591, lng: 139.7673068 }} // 東京駅
    defaultHeading={0}
    defaultTilt={0}
    
    // 地図上の操作が可能
    gestureHandling={"greedy"}
    // ヘッディングの操作を有効化
    headingInteractionEnabled={true}
    // 傾斜の操作を有効化
    tiltInteractionEnabled={true}
    // 地図のタイプ
    mapTypeId={"satellite"}
    // 地図のレンダリングタイプ
    renderingType={RenderingType.VECTOR}
    // 地図のID
    mapId={"dummy"}
    
    // デフォルトUIを非表示
    disableDefaultUI={true}
    // 右下Zoomボタン
    zoomControl={true}
    // カメラボタン
    cameraControl={true}
    // 左上地図Typeボタン
    mapTypeControl={true}
    // 右下スケールボタン
    scaleControl={true}
    // 右下ストリートビューボタン
    streetViewControl={true}
    // 右下回転ボタン（航空写真時のみ）
    rotateControl={true}
    // 右下フルスクリーンボタン
    fullscreenControl={true}
    // キーボードショートカットを無効化
    keyboardShortcuts={false}
    
    // 地図キャッシュ
    reuseMaps={true}
/>

イベント検知

Google マップでは、ユーザーの操作によって発生する様々なイベントを検知できます。addListener()メソッドで監視対象のイベントを登録します。

SetterとGetter

Google マップ上の設定値を、画面サイズや条件に応じて動的に取得・変更できます。イベント検知と組み合わせることで、変化時点の値を表示・更新することが可能です。

実装方法

イベント検知とGetterを組み合わせ、変更値をログに出力する例です。

const map = useMap();

useEffect(() => {
    if (!map) return;

    const listeners = [
      map.addListener("tilt_changed", () => {
        console.log("Tilt:", map.getTilt());
      }),
      map.addListener("heading_changed", () => {
        console.log("Heading:", map.getHeading());
      }),
      map.addListener("zoom_changed", () => {
        console.log("Zoom:", map.getZoom());
      }),
      map.addListener("click", (e: google.maps.MapMouseEvent) => {
        console.log("Click:", e.latLng?.toJSON());
      }),
      map.addListener("dragstart", () => {
        console.log("Drag: start");
      }),
      map.addListener("dragend", () => {
        console.log("Drag: end", map.getCenter()?.toJSON());
      }),
    ];

    return () => listeners.forEach((l) => google.maps.event.removeListener(l));
  }, [map]);

a3.gif

地図の上に要素を描画する（ライブラリ使用）

Googleマップでは、さまざまな要素をマップ上に描画できます。@vis.gl/react-google-mapsライブラリを利用することで、Reactコンポーネントとしてより簡単に実装できます。全て<Map>コンポーネントの子要素として配置します。実装例を交えながらご紹介！

マーカー（ピン）

地図上の特定の位置にマーカーを配置できます。 Advanced Markersを使用すると、より柔軟なカスタマイズが可能です。

デフォルトマーカーの場合、表示したい位置座標のみで表示できます。

<Marker
  position={{ lat: 35.6809591, lng: 139.7673068 }}
/>

image.png

カスタムマーカーの場合、表示したい位置座標以外に色や大きさ、デザイン画像などさまざま指定が可能です。

{/* 赤色マーカー */}
<AdvancedMarker position={{ lat: 35.6809591, lng: 139.7673068 }} /> 
{/* 青色マーカー */}
<AdvancedMarker position={{ lat: 35.6809591, lng: 139.7773068 }}> 
  <Pin
    background={"#0000ff"}
    borderColor={"#ffffff"}
    glyphColor={"#0000cd"}
  />
</AdvancedMarker>
{/* 黒色アイコンマーカー */}
<AdvancedMarker position={{ lat: 35.6809591, lng: 139.7573068 }}> 
  <img
    src={OriginalMarker}
    alt="Original Marker"
    width={32}
    height={32}
  />
</AdvancedMarker>

ウィンドウ表示

地図上に表示される吹き出しで、場所に関する追加情報を表示できます。座標またはマーカーをアンカーとして指定し、State管理と組み合わせることで開閉制御が可能です。

<AdvancedMarker
  ref={markerRef}
  position={{ lat: 35.6809591, lng: 139.7673068 }}
  onClick={() => setIsInfoWindowOpen(true)}
/>
{isInfoWindowOpen && (
  <InfoWindow
    anchor={marker}
    onCloseClick={() => setIsInfoWindowOpen(false)}
  >
    <div>Hello World!!!</div>
  </InfoWindow>
)}

a5.gif

地図の上に要素を描画する（Google Maps API 直接利用）

続いて、@vis.gl/react-google-mapsライブラリを利用せず、Google Maps JavaScript API を直接利用して描画する方法です。実装例を交えながらご紹介！

ライン（線）

Polylineを使用して、地図上に線を描画できます。座標の配列を指定し、色や太さなどのスタイルをカスタマイズできます。結ぶ点座標に先ほどのマーカーを追加すると、マーカー間距離へのラインとなります。また結ぶ点は複数設定も可能です。

const map = useMap();

useEffect(() => {
    if (!map) return;
    
    const polyline = new google.maps.Polyline({
      path, // 結ぶ点の座標
      strokeColor, // 線の色
      strokeWeight: 2, // 線の太さ
      map,
    });

    return () => polyline.setMap(null);
}, [map]);

カスタム画像

GroundOverlayを使用して、地図上の指定範囲に画像を重ねて表示できます。地図の境界boundsを指定し、その範囲内に画像を描画します。今回は地理院地図より昔の東京駅の地図を重ねてみました。

const map = useMap();

useEffect(() => {
    if (!map) return;
    
    const latLngBounds = new google.maps.LatLngBounds(
      { lat: bounds.south, lng: bounds.west },
      { lat: bounds.north, lng: bounds.east }
    );
    
    const overlay = new google.maps.GroundOverlay(mapImage, latLngBounds, {
      opacity: 0.8,
    });
    overlay.setMap(map);
    
    return () => overlay.setMap(null);
}, [map]);

GoogleMap実装にあたり、APIKey作成においてクレジット登録を行なっています。使用しない場合、忘れないうちに作成したプロジェクトを削除しておくことをお勧めしておきます！

おわりに

今回は、Google MAPをReactで実装する際のパラメータや実装方法をまとめました！設定できる項目が多く、戸惑う部分も多くありましたが、実装自体はとても簡単で、自由度の高い実装ができたのではないかなと思います。様々な機能をもっと使いこなせるよう、引き続き取り組んでまいります！引き続きよろしくお願いします〜！

8
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?