google api уже представлен в приложении react

#reactjs #api #key

#reactjs #API #Клавиша

Вопрос:

«google api уже представлен»

Объяснение ошибки при съемке экрана

1.

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY0amp;libraries=places"></script>
    <script>
        function init() {

            var options = {
              types: ['(cities)'],
              componentRestrictions: {country: "au"}
            };

            var input = document.getElementById('citySearch');
            var autocomplete = new google.maps.places.Autocomplete(input,options);
        }

        google.maps.event.addDomListener(window, 'load', init);
    </script>
  

2

   return (
    <div className="googleMapContainer">
      {console.log(window.google)}
      <LoadScript googleMapsApiKey={googleApiKey}>
        <div className="googleMap">
          <GoogleMap
  

как с этим справиться?
один ключ API находится в index.html а другой пытается использовать ключ api в качестве реквизита для компонента react-google-maps

Ответ №1:

На случай, если кто-то еще обнаружит это, Google предлагает другой API для загрузки скриптов вместо использования <LoadScript> .

   const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'YOUR API KEY HERE',
    libraries: ['geometry', 'drawing'],
  });
  

Тогда вы можете просто использовать isLoaded позже:

 {isLoaded amp;amp; <GoogleMap
  onLoad={saveMap}
  mapContainerClassName={classes.mapContainer}
  mapContainerStyle={containerSize}
  center={DefaultCenterPoint}
  options={options}
>
  {mapItems}
</GoogleMap>}
  

Это автоматически обрабатывает, если maps API уже загружен 🙂

Ответ №2:

Попробуйте <GoogleMap /> без <LoadScript /> в коде 2. Подробнее здесь

В качестве альтернативы вы можете переместить loadScript в родительский компонент, который не отображает много, предпочтительно близко к корню вашего дерева.

Ответ №3:

вы должны сначала проверить, заблокирован ли скрипт, прежде чем загружать его снова. вот пример кода на react.js {window.google === undefined ? <LoadScript><GoogleMap /></LoadScript> : <GoogleMap />}

Ответ №4:

Вы получаете сообщение об ошибке google API is already presented in react app при попытке загрузить Google maps API более одного раза. В вашем случае вы загрузили скрипт Google API <script ... /> из своего первого фрагмента. Вы также использовали <LoadScript .../> во втором фрагменте, который делает то же самое.

Итак, чтобы избавиться от этой ошибки, вам нужно один раз загрузить Google Maps API.