👏

ReactでGoogle Maps APIを使用するとマーカーが置けない

2023/07/10に公開

JavaScript

初めに

Google MapをReactで使用したい時、@react-google-maps/apiをインストールします。TypeScriptを使用する時は@types/google.mapsもインストールしましょう。

今回困ったこと

タイトルの通りMarkerを置けません。ドキュメントのコードは以下の通り。

自分はTypeScriptだったので下記のコードです。

import React from 'react'
import { GoogleMap, LoadScript } from '@react-google-maps/api'
import { Marker } from '@react-google-maps/api'

const containerStyle = {
  width: '400px',
  height: '400px',
}

const center = {
  lat: 37.772,
  lng: -122.214,
}

const marking = {
  lat: 37.772,
  lng: -122.214,
}
const onLoad = (marker: google.maps.Marker) => {
  console.log('marker loaded at', marker.getPosition()?.toString())
}
const googleMapURL = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}&libraries=places`

function MyComponent() {
  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY!}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={2}
      >
        <MarkerF
          visible={true}
          position={marking}
          onLoad={onLoad}
        />
        {/* Child components, such as markers, info windows, etc. */}
        <></>
      </GoogleMap>
    </LoadScript>
  )
}

export default React.memo(MyComponent)

解決策

今回はReactのバージョンが問題でした。
Reactのバージョンが18.0以降はimportを変更します。

import { MarkerF } from '@react-google-maps/api'

自分はこれでマーカーが正しく置けました！
これで動かない人はMaps JavaScript APIとかと競合していないかなど確認してみてください。

初めに

今回困ったこと

解決策

Discussion