前提・実現したいこと
Reactを使用してGoogleMapを表示させたいです。
React+Laravel環境下で、パッケージ(Google-Map-React)を使用して、GoogleMapの表示を行おうとしています。
ドキュメントのGettingStartの項目と同様の記述を行い、表示を試してみましたが、エラーが発生し表示できていない状況です。
発生している問題・エラーメッセージ
本来地図が表示される箇所には、
エラーが発生しました。 このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。
コンソール画面に、以下のエラーが発生している状況です。
invalid-key-map-error
該当のソースコード
React
1import GoogleMapReact from "google-map-react"; 2import React from "react"; 3 4const AnyReactComponent = ({ text }: any) => <div>{text}</div>; 5 6const SimpleMaps = (props: any) => { 7 const center = { lat: 11.0168, lng: 76.9558 }; 8 const zoom = 11; 9 10 return ( 11 <div style={{ height: "100vh", width: "100%" }}> 12 <GoogleMapReact 13 bootstrapURLKeys={{ 14 key: "apikey" 15 }} 16 defaultCenter={center} 17 defaultZoom={zoom} 18 19 > 20 <AnyReactComponent 21 lat={11.0168} 22 lng={76.9558} 23 text="My Marker" 24 /> 25 </GoogleMapReact> 26 </div> 27 ); 28}; 29 30export default SimpleMaps; 31
あなたの回答
tips
プレビュー