0

前提・実現したいこと

現在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

2

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。