Как заставить работать ключ API Карт Google на локальном хосте?

Я создал ключ API и в разделе рефереров добавляю следующее:

Accept requests from these HTTP referrers (websites) (Optional)

Use asterisks for wildcards. If you leave this blank, requests will be 
accepted from any referrer. Be sure to add referrers before using this key 
in production. 

localhost

Это не работает, и если я исключу ключ API, он тоже не сработает.

Ответы (11)

  1. Перейдите по этому адресу: https://console.developers.google.com/apis
  2. Создать новый проект и создать учетные данные (ключ API)
  3. Нажмите «Библиотека»
  4. Щелкните любой API, который хотите
  5. Нажмите «Включить»
  6. Нажмите «Учетные данные»> «Изменить ключ»
  7. В разделе «Ограничения приложений» выберите «HTTP-рефереры (веб-сайты)»
  8. В разделе «Ограничения веб-сайта» нажмите «ДОБАВИТЬ ЭЛЕМЕНТ»
  9. Введите адрес своего веб-сайта (или «localhost», «127.0.0.1», «localhost: port» и т. Д. Для локальных тестов) в текстовое поле и нажмите ENTER, чтобы добавить его в список
  10. СОХРАНИТЬ и использовать свой ключ в своем проекте

Можете пойти по этому пути. По крайней мере у меня работает:

на странице учетных данных:

  1. Выберите вариант с IP-адресом (вариант № 3).

  2. Укажите свой IP-адрес от вашего провайдера. Если вы этого не сделаете, выполните поиск своего IP-адреса по этой ссылке: https://www.google.com/search?q=my+ip

  3. Сохранить.

  4. Измените ссылку на карту Google, как показано в тегах скрипта:

    https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzxxxxxxxx"

  5. Подождите около 5 минут или более, чтобы ваш ключ API распространялся.

Теперь ваша карта Google должна работать.

Если вы работаете на localhost, создайте отдельный ключ API для своей разработки, а затем снимите ограничения для этого ключа, чтобы ваш localhost мог его использовать. Помните, что нельзя использовать этот ключ на производстве, чтобы не раскрывать свой ключ онлайн-охотникам.

У меня была такая же проблема, и все попытки заставить ограничения работать в моей среде localhost не увенчались успехом, пока я не создал отдельный apikey специально для разработки, а затем снял его ограничения. Однако я не использую этот ключ в производственной среде, и как только закончу разработку, я немедленно удалю ключ API.

Я знаю, что эта публикация опаздывает, но для людей, которые, вероятно, столкнутся с этой проблемой в будущем, это лучший путь.

Вы должны проверить конкретную ошибку в консоли javascript (например, Ctrl + Shift + K в Firefox для Windows).

Согласно Steven Gliebe (2016), существует четыре распространенных случая этой проблемы. Если можно резюмировать это так:

  1. MissingKeyMapError >> Получить ключ API Карт Google (но также рассмотрите альтернативный номер 2)
  2. RefererNotAllowedMapError >> Зарегистрируйте свой localhost: port в панели инструментов разработчика Google.
  3. ApiNotActivatedMapError >> Включение Google Maps API на странице библиотеки Google API
  4. InvalidKeyMapError >> Добавьте ваш ключ в свои скрипты / коды правильно

После внесения некоторых изменений в код очистите кеш браузера, если это необходимо.

В случае возникновения других ошибок, вы можете проверить API Карт Google Страница документации по кодам ошибок.

У меня не получилось, когда я использовал

http://localhost{port}/
http://localhost:{port}/something-else/here

Однако удаление http помогло мне. Я только что добавил localhost: 8000 без префикса http.

Думаю, я немного опоздал на вечеринку, и хотя я согласен с тем, что создание отдельного ключа для разработки (localhost) и продукта, можно сделать и то, и другое всего одним ключом.

Когда вы используете Ограничения приложений -> HTTP-ссылки -> Ограничения веб-сайтов, вы можете вводить URL-адреса с подстановочными знаками.

Однако с использованием подстановочного знака, например .localhost/ или .localhost: {port }. (при наличии .yourwebsite.com / *), похоже, не работают.

Простое добавление единственного * действительно работает, но в основном это дает вам неограниченный ключ, чего вы тоже не хотите.

When you include the full path withhout using the wildcard * it also works, so in my case putting:

http://localhost{порт} /
http://localhost: {порт} / что-то еще / здесь

Заставляет карты Google работать как локально, так и на www.yourwebsite.com, используя один и тот же ключ API.

В любом случае, когда есть 2 отдельных ключа, я бы посоветовал это сделать.

Набрав «мой IP» в поиске Google, я получил свой публичный IP-адрес и вставил его в IP-адрес (третий вариант). У меня работает.

Набрав «мой IP» в поиске Google, я получил свой публичный IP-адрес и вставил его в IP-адрес (третий вариант). У меня работает.

Перейдите по этому адресу: https://console.developers.google.com/apis

Создать новый проект и создать учетные данные (ключ API) Щелкните "Библиотека" Нажмите на любой API, который хотите Нажмите "Включить". Нажмите «Учетные данные»> «Изменить ключ». В разделе «Ограничения приложений» выберите «HTTP-рефереры (веб-сайты)». В разделе «Ограничения веб-сайта» нажмите «ДОБАВИТЬ ЭЛЕМЕНТ»

.

Добавить * и нажмите Enter СОХРАНИТЕ и используйте свой ключ в своем проекте

Where it says "Accept requests from these HTTP referrers (websites) (Optional)" you don't need to have any referrer listed. So click the X beside localhost on this page but continue to use your key.

Затем он должен сработать через несколько минут.

Внесенные изменения иногда вступают в силу через несколько минут, поэтому подождите несколько минут перед повторным тестированием.

Вы можете следовать этому руководству о том, как использовать Google Maps для тестирования на локальном хосте.

Проверьте эти связанные потоки SO:

Надеюсь, это поможет!

2022 WebDevInsider