前提・実現したいこと
現在React.jsを用いて投稿型webアプリを制作しています。
メインのコードは書き終えたのですが1箇所だけwarningが解決しないため、是非皆さんの知恵を貸していただきたいです。
エラーは以下の通りです。
発生している問題・エラーメッセージ
Aborted attempt to load Google Maps JS with @googlemaps/js-api-loader.This may result in undesirable behavior as script parameters may not match.
該当のソースコード
Map.js
import GoogleMapReact from "google-map-react";
...
//住所から地名を取得
const Geocoding = useCallback(() => {
Geocode.setApiKey("AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY");
Geocode.fromAddress(prop.address).then(
(response) => {
const { lat, lng } = response.results[0].geometry.location;
setSpotLat(lat);
setSpotLng(lng);
console.log(lat, lng);
},
(error) => {
console.error(error);
}
);
}, [prop.address]);
useEffect(() => {
Geocoding();
}, [Geocoding]);
...
<GoogleMapReact
bootstrapURLKeys={{ key: "AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY" }}
center={{
lat: spotLat,
lng: spotLng,
}}
defaultZoom={16}
yesIWantToUseGoogleMapApiInternals
>
Map.js
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
...
<GooglePlacesAutocomplete
apiKey="AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY"
selectProps={{
value: courseSpotAddress,
onChange: setcourseSpotAddress,
placeholder: "名前を打ち込んでください(例 神戸駅)",
}}
apiOptions={{ language: "jp", region: "jp" }}
menuContainerStyle={{ zIndex: 999 }}
//style={styles.tweet_input}
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
他サイト様での質問
teratailにて同様の質問をしています。
https://teratail.com/questions/343951