🔔 あなたへのおすすめ記事「For you（β）」をリリースしました
Zenn
📍

Next.js × Google Maps Platform でマップアプリを作成する

2025/04/04に公開
2
Next.js
React
TypeScript
Google Map
tech

はじめに

こんにちは、クラウドエース第四開発部の安田です。

今回案件で利用する機会があったので、Next.js で Google Maps Platform を使ってマップアプリを作成する方法を初学者向けにまとめてみます。

たくさんのサービスがあるけど、実際にWebサイトに組み込むときはどのサービスを利用すればいいの？ React で利用するときにはどうすればいい？
などなど迷っている方がいれば参考にしてみてください！

Google Maps Platform について

ウェブページやアプリケーションに Google マップを組み込んだり、Google マップからデータを取得したりすることができるクラウドサービスです。

ウェブ、モバイルアプリ、サーバーサイドのアプリケーションなど、様々な環境で地図機能を利用できるように、複数の SDK と API を提供しています。

01.png

料金について

今回はウェブアプリに Google マップとマーカーを表示する実装になります。
これには Dynamic Maps という SKU を利用しますが、月 10,000 リクエストまでは無料で利用することが可能です。

使用量はサービス SKU ごとにトラッキングされる仕組みになっているため、特にカテゴリを選択する必要はありません。
料金の詳しい説明については下記をご覧ください。

React ラッパーライブラリ

今回はウェブブラウザ上で動作する JavaScript ライブラリの Maps JavaScript API を利用していきますが、React でそのまま使おうとするとライフサイクルやコンポーネントとの連携を自身で管理する必要があるのでやや実装が複雑になってしまいます。

それを避けるため、React ラッパーを利用します。

React ラッパーライブラリはいくつか存在しますが、googlemaps のリポジトリにある @googlemaps/react-wrapper は現在アーカイブとなっています。
公式ドキュメントを見ると昨年 1.0 がリリースされた @vis.gl/react-google-maps の利用を推奨しているようなので、こちらを利用していきます。

Google がスポンサーとなった初のライブラリで、Google Maps JavaScript API を簡単に React と統合することができます。

Next.js プロジェクトを作成

Next.js のインストール

自動インストールでプロジェクトを作成します。
今回は TypeScript と Tailwind CSS を利用するので、そのように設定してください。

npx create-next-app@latest

Maps Javascript API を有効化し、API キーを発行する

Google Maps Platform を利用するためには、Google Cloud プロジェクトの作成と API キーの発行が必要です。
今回は Google Cloud プロジェクトがすでに作成されていることを前提として進めていきます。

プロジェクト作成がまだの場合は、こちらのステップに従ってプロジェクトを作成してください。

1. Google Maps Platform の有効化

Maps API ライブラリページにアクセスします。

今回はマップ表示を行うだけなので Maps JavaScript API を有効にします。

2.png

2. API キーの発行

サイドメニューから「鍵と認証情報」を選択します。
認証情報を作成ボタンを押下し、API キーの作成を選択します。

3.png

作成画面が表示されるので各種制限をかけて作成します。

ここではウェブサイトの制限にローカル開発環境の URL、利用可能な API は Maps Javascript API のみを選択しました。
キーが悪用されることを防ぐためにも適切に設定を行うようにしましょう。

4.png

作成を押下すると API キーが作成されます。

React Google Maps のインストール

Next.js プロジェクトに @vis.gl/react-google-maps をインストールします。

npm install @vis.gl/react-google-maps

Google Map を表示する

@vis.gl/react-google-maps のドキュメントの内容に従って APIProvider と Map のコンポーネントを配置していきます。

環境変数を設定

.env ファイルを作成し、先ほど発行した API キーを設定します。

.env
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY={API Key}

マップを表示するコンポーネントを作成

APIProvider は Google Maps JavaScript API をロードするためのコンポーネントです。
apiKey には先ほど設定した環境変数を指定します。

app/map/components/map-content.tsx
'use client';

import { APIProvider, Map } from '@vis.gl/react-google-maps';

export const MapContent = () => {
  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''}>
      <Map defaultZoom={15} defaultCenter={{ lat: 35.656, lng: 139.737 }} />
    </APIProvider>
  );
};

APIProvider や Map は内部的に createContext を利用しており、これらはサーバーコンポーネントでは動作しません。
ファイルの先頭に 'use client' を追加し、クライアントコンポーネントとして指定しましょう。

ページコンポーネントから呼び出す

app/map/page.tsx
import { MapContent } from '@/app/map/components/map-content';

export default function Page() {
  return (
    <div className="h-svh">
      <MapContent />
    </div>
  );
}

ローカル環境を立ち上げる

ローカル環境を立ち上げて対象のページ（http://localhost:3000/map）にアクセスすると..

7.png

無事マップが表示されました。
ラッパーを使うことでほぼコードを書くことなく、簡単にアプリに Google マップを組み込む事ができます 🎉🎉

マーカー表示

マーカー表示のためのコンポーネントも用意されています。
Map コンポーネント内に AdvancedMarker を配置します。

デフォルトでは赤いマーカーが表示されますが、HTML や CSS を使用してマーカーを見た目をカスタマイズすることもできます。

app/map/components/map-content.tsx
'use client';

import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps';

export const MapContent = () => {
  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''}>
      <Map
        defaultZoom={15}
        defaultCenter={{ lat: 35.656, lng: 139.737 }}
      >
        <AdvancedMarker position={{ lat: 35.656, lng: 139.737 }} />
      </Map>
    </APIProvider>
  );
};

14.png

おまけ：マップのスタイルを設定してみる

Google Maps Platform では、マップ ID を利用して対象物の表示/非表示の切り替えやマップのスタイル変更を行うことができます。

マップ ID を作成

サイドバーから「マップ管理」を選択し、マップ ID を作成します。

地図スタイルを作成

サイドバーから「地図のスタイル」を選択し、スタイルを作成します。
図のように、対象物の表示・非表示などを自由に切り替えることができます。
ここではシンプルな表示にするため、スポットのポリゴンとラベルをすべて非表示にしています。

11.png

マップ ID に地図のスタイルを紐づける

先ほど作成したマップ ID を選択し、地図のスタイル変更から作成したスタイルを選択してください。
保存を押下するとマップ ID とスタイルを紐づけることができます。

12.png

マップ ID をコードに反映する

.env にマップ ID を追加します。

.env
NEXT_PUBLIC_GOOGLE_MAPS_ID={マップ ID}

Map コンポーネントの props に設定した環境変数を指定します。

app/map/components/map-content.tsx
'use client';

import { APIProvider, Map } from '@vis.gl/react-google-maps';

export const MapContent = () => {
  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''}>
      <Map
        defaultZoom={15}
        defaultCenter={{ lat: 35.656, lng: 139.737 }}
        mapId={process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID || ''}
      />
    </APIProvider>
  );
};

ページに反映されていることを確認

マップページにアクセスすると、コンソール画面で設定したスタイルが反映されていることが確認できました。

13.png

まとめ

Next.js で Google Maps Platform を使ってマップアプリを作成する方法を解説しました。

今回は、APIProvider と Map コンポーネントをページ内で直接呼び出す簡単な実装を紹介しましたが、動的マップの表示は読み込むたびにリクエスト数がカウントされる仕組みになっています。
そのため実際のプロジェクトで利用する際は、ルートレベルでの初期化やマップコンポーネントを再利用するなど、不要なマップの読み込みを避けるように工夫してみてください！

また、今回利用した @vis.gl/react-google-maps ライブラリには他にも便利なコンポーネントや Hooks が用意されています。
Hooks を利用して Maps JavaScript API ライブラリのさまざまな機能を扱うことができるので、是非試してみてください。

参考情報

2

Discussion

ログインするとコメントできます