

### 前提・実現したいこと

現在React.jsを用いて投稿型webアプリを制作しています。  
メインのコードは書き終えたのですが１箇所だけwarningが解決しないため、是非皆さんの知恵を貸していただきたいです。  
エラーは以下の通りです。

### 発生している問題・エラーメッセージ

[code]

    Aborted attempt to load Google Maps JS with @googlemaps/js-api-loader.This may result in undesirable behavior as script parameters may not match. 
    
[/code]

### 該当のソースコード

Map.js

[code]

    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
          >
    
[/code]

Map.js

[code]

    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"}
                          />
    
[/code]

### 他サイト様での質問

teratailにて同様の質問をしています。  
<https://teratail.com/questions/343951>


CC BY-SA 4.0
2021-06-14T10:22:43.343
77553
2021-06-15T01:17:05.277
2021-06-15T01:17:05.277
45409
45409
question
reactjs google-maps
GooglePlacesAutocompleteとgoogle-map-reactを共存させる方法