Next.jsで作られたサイトにGoogle Mapを表示したい。

弊社のプロジェクトでGoogle Mapを表示するタスクが発生したのでメモしました。

前提条件としてGoogle mapのAPIをNext.jsで使用します。

使用するAPIはMaps JavaScript APIです。APIのkeyが必要になりますので、事前に取得しました。

こちら(https://developers.google.com/maps/documentation/javascript/overview?hl=ja#maps_map_simple-typescript)のドキュメントを参考にしながら作業をしました。

まずはAPI keyをNext.js側に登録します。

.envにAPI keyを記述します。

GOOGLE_MAP_API_KEY = "XXXXXXXXXXXXXXXX_YOU_NO_API_KEY_XXXXXXX"

next.config.jsにも追記します。

module.exports = {
  env: {
    GOOGLE_MAP_API_KEY: process.env.GOOGLE_MAP_API_KEY
  }
}

そして、@googlemaps/js-api-loaderモジュールをインストールします。

$ npm install --save @googlemaps/js-api-loader

下準備が終わったので、components/Map.tsxを

作成し/pages/index.tsxに読み込ませました。

// components/Map.tsx
import { Loader } from '@googlemaps/js-api-loader'

export default function Map() {
 return (
    <section>
      <div id="map"></div>
    </section>
  )
}

// pages/index.tsx
import Map from '../components/Map'

export default function Home() {
  return (
    <Map />
  )
}

では、いよいよ実装していきます。ドキュメント(https://github.com/googlemaps/js-samples/blob/5385d9cc27dba774f43a5d989bc428e6ec805456/samples/programmatic-load/src/index.ts#L24-L35)をそのままコピペしたのですがTypeScriptのlintエラーが出てしまったので型ファイルをインストールします。

$ npm install --save @types/google.maps

また、apiKey: process.env.GOOGLE_MAP_API_KEYの部分に

Type 'string | undefined' is not assignable to type 'string'.

Type 'undefined' is not assignable to type 'string'.ts(2322)とエラーが出たので

process.env.GOOGLE_MAP_API_KEYがundefinedの場合は処理させないために

apiKey: process.env.GOOGLE_MAP_API_KEY!

↑を追記しました。まとめたコードが下記になります。

またid="map"には

height: 50vh;のstyleを当てています。

// components/Map.tsx
import { Loader } from '@googlemaps/js-api-loader'

export default function Map() {
  // ↓を追記しました。
  if (typeof window !== 'undefined') {
    let map: google.maps.Map

    const additionalOptions = {}
    // [START maps_programmatic_load_promise]
    const loader = new Loader({
      apiKey: process.env.GOOGLE_MAP_API_KEY!,
      version: 'weekly',
      ...additionalOptions,
    })

    loader.load().then(() => {
      map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      })
    })

  }
  
 return (
    <section>
      <div id="map"></div>
    </section>
  )
}

ではローカルサーバーを起動します。

$ npm run dev

お！

地図が表示されていました。

シドニーが表示されているので、東京タワーを表示したいと思います。centerプロパティに緯度経度を入れzoomプロパティも調整し拡大表示にしました。

// components/Map.tsx内部の下記を編集しました。

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement,   {
    center: { lat: 35.65874610748325, lng: 139.74591569509653 },
    zoom: 15,
  })
})

お

無事に表示できました。

うまくAPIを活用して弊社のプロジェクトにいかしていきたいと思いました。

ここまでお読みいただきありがとうございました。