前提
React.jsで地図を表示し、その上に行きたいお店などを示すためのシステムを作ってみたいです。
実現したいこと
GoogleMapReact(GoogleMap for Javascript)を用いてページに地図を表示したいです。
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
google_map_markers.js:260 Uncaught TypeError: Cannot read properties of undefined (reading 'latLng')
該当のソースコード
Javascript
1import React from 'react'; 2import GoogleMapReact from 'google-map-react'; 3import { Paper, Typography, useMediaQuery } from '@material-ui/core'; 4import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined'; 5import Rating from '@material-ui/lab'; 6 7import makeStyles from './styles'; 8 9const Maps = () => { 10 const classes = makeStyles(); 11 const isMobile = useMediaQuery('(min-width:600px)'); 12 13 const coordinates = { lat: 0, lng: 0 }; 14 15 return ( 16 <div className={classes.mapContainer}> 17 <GoogleMapReact> 18 bootstrapURLKeys={{ key: 'xxxxxxxxxxx' }} 19 defaultCenter={coordinates} 20 center={coordinates} 21 defaultZoom={14} 22 margin={[50,50,50,50]} 23 options={''} 24 onChange={''} 25 onChildClick={''} 26 27 28 </GoogleMapReact> 29 30 </div> 31 ); 32} 33 34export default Maps;
試したこと
const coordinates = { lat : 0, lng : 0 }; の値を、NULLとか、Floatなどを素数({ lat: -25.344, lng: 131.031 };)に変更してみました。
補足情報(FW/ツールのバージョンなど)
"dependencies": { "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.61", "@react-google-maps/api": "^2.17.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.2.3", "google-map-react": "^2.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。