概要

会社概要やイベント詳細ページなど、地図を表示する必要がある際に使えるコンポーネントを作成しました。

NextJs（React 18）用です。

実装内容

必要なもの

事前に@react-google-maps/apiをインストールします。

% yarn add @react-google-maps/api

作ったコンポーネント

import { Libraries } from '@googlemaps/js-api-loader'
import { GoogleMap, MarkerF, useJsApiLoader } from '@react-google-maps/api'
import { CSSProperties, useState } from 'react'

interface Props {
  lat: number
  lng: number
  mapContainerStyle?: CSSProperties
}

const LocationMap = ({ lat, lng, mapContainerStyle }: Props) => {
  const [libraries] = useState<Libraries>(['geometry', 'drawing']) // 必要なライブラリーを指定します。
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: /* ここにGCPで発行したAPIキーを指定します。 */,
    libraries,
  })
  if (isLoaded) {
    return (
      <GoogleMap
        mapContainerStyle={
          mapContainerStyle || { height: '450px', width: '100%' }
        }
        center={{ lat, lng }}
        zoom={16}
      >
        <MarkerF position={{ lat, lng }} />
      </GoogleMap>
    )
  } else {
    return <></>
  }
}

export default LocationMap

注意点

• React 18では、MarkerFを使わないとマーカーが表示されませんでした。
• useJsApiLoader を使って、すでに外部scriptをロードしたかどうか判定しないと、エラーになるケースがあります。

以上です。