Автозаполнение Google вместе с картами Google - проблема с загрузкой

Question

Я использую Google-карты-реагировать в моем проекте.

Теперь мне нужно интегрировать места API внутри карт.

Но кажется, что есть некоторая проблема порядка загрузки, и поэтому я получаю следующую ошибку.

Ошибка: [реакция-места-автозаполнение]: должна быть загружена библиотека JavaScript API Карт Google. Смотрите: https://github.com/kenny-hibino/react-places-autocomplete

Если я удаляю компонент мест, карты работают нормально.

Мне нужны оба компонента для совместной работы.

Есть идеи, как это исправить?

Answer 1

Поскольку в сообщении об ошибке указана библиотека Google Maps JavaScript API, могут быть рассмотрены следующие параметры. Чтобы загрузить статически, добавив ссылку на public/index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=--GOOGLE-MAPS-KEY--&libraries=places"></script-->

или, например, через google-maps-reactGoogleApiWrapper HOC, как это:

export default GoogleApiWrapper({
  apiKey: "--GOOGLE-MAPS-KEY--",
  libraries: ["places"]
})(MapContainer);

Эта демонстрация демонстрирует, как интегрировать react-places-autocomplete а также google-maps-react

Answer 2

я использую @ response-google-maps / api. решение для меня было добавить places к libraries поле

      const {isLoaded} = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY as string,
    libraries: ["places"]
});

Answer 3

У меня была эта проблема, потому что я загружал иreact-google-autocompleteна той же странице. я должен был сказать своемуgoogle-map-reactкомпонент для загрузки библиотеки мест, например:

      <GoogleMapReact 
   bootstrapURLKeys={{ 
      key: API_KEY,
      libraries:['places'],
   }} 
/>

Компонент "Карта" сначала загружает скрипт Google, но не включаетplacesбиблиотека, если не указано иное. Когда вы загружаете компонент автозаполнения позже, Google видит, что у вас уже загружен скрипт карты, поэтому он не добавляет его снова. Вот почему вы должны сначала указать все библиотеки в компоненте, который загружает скрипт GoogleMaps.

Подробнее об этой проблеме можно прочитать здесь