Как добавить карту Google на веб-страницу с помощью API

Наука, технологии, математикаJun 23, 2021

Что нужно знать

  • Перейти к Консоль Google Cloud Platform и создайте или выберите проект, затем нажмите Продолжать. На Реквизиты для входа страницу, получите Ключ API.
  • Вставьте код JavaScript (показанный ниже) в раздел BODY документа HTML.
  • В заголовке HTML-документа укажите ограничения CSS для карты, включая размер, цвета и размещение страницы.

В этой статье объясняется, как вставить карту Google с маркером местоположения на вашу веб-страницу. Этот процесс включает получение специального программного ключа от Google и последующее добавление на страницу соответствующего кода JavaScript.

Получите ключ API Карт Google

Чтобы защитить свои серверы от бомбардировки запросами на карты и поиск местоположения, Google ограничивает доступ к своей базе данных Maps. Вы должны зарегистрироваться в Google в качестве разработчика, чтобы получить уникальный ключ для использования интерфейса программирования приложений для запроса данных с серверов карт. Ключ API предоставляется бесплатно, если вам не нужен надежный доступ к серверам Google (например, для разработки веб-приложения).

instagram viewer

Чтобы зарегистрировать свой ключ API:

  1. Перейти к Консоль Google Cloud Platform и после входа в систему с учетной записью Google либо создайте новый проект, либо выберите существующий.

  2. Нажмите Продолжать для включения API и любых связанных служб.

  3. На Реквизиты для входа страницу, получите Ключ API. При необходимости установите соответствующие ограничения на ключ.

  4. Защитите свой ключ API с помощью лучшие практики рекомендовано Google.

Если вы считаете, что вам нужно, чтобы карта отображалась чаще, чем позволяет ваша бесплатная квота, оформите соглашение о выставлении счетов с Google. Большинство веб-сайтов, особенно блоги с низким трафиком или нишевые сайты, вряд ли потребуют большую часть выделенной квоты.

Вставьте JavaScript на свою веб-страницу

Вставьте следующий код на свою веб-страницу в разделе BODY HTML-документа:

// Инициализируем и добавляем функцию карты initMap () {
// Расположение флага var flag = {lat: XXX, lng: YYY};
// Карта с центром в флаге var map = new google.maps. Карта (документ.getElementById ('карта'), {масштаб: 4, центр: флаг});
// Маркер, расположенный под флагом var marker = new google.maps. Маркер ({позиция: флаг, карта: карта}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">

В этом коде измените следующее:

  • Заменять флаг с именем, которое ссылается на место, которое вы закрепляете. Сделайте это простым и коротким (например, дом или же офис или же Париж или же Детройт). Вы можете запустить этот код, оставив флаг как есть, но изменение имени поддерживает повторное использование этого кода на той же странице для встраивания нескольких разных карт.
  • Заменять XXX а также ГГГ с широтой и долготой в десятичных дробях положения маркера на карте. Вы должны заменить эти значения, чтобы карта отображалась правильно. Самый простой способ определить широту и долготу - открыть Карты Google и щелкнуть правой кнопкой мыши точное место, которое вы хотите отметить. В контекстном меню выберите Что здесь? для просмотра широты и долготы.
  • Заменять ВАШ_API_KEY с помощью ключа API, полученного от Google. Не ставьте пробелы между знаком равенства и амперсандом. Без ключа запрос не будет выполнен, и карта не будет отображаться должным образом.

Оптимальные практики

В заголовке HTML-документа укажите ограничения CSS для карты, включая размер, цвета и размещение страницы.

Сценарий карты Google содержит такие атрибуты, как зум а также центр которые открыты для модификации конечным пользователем. Этот более продвинутый метод поддерживается в документации для разработчиков Google.

API Карт Google - ценный актив. Инструкции Google по передовой практике предлагают отличный совет по защите ключа от неправомерного использования другими лицами. Надлежащая безопасность особенно важна, если вы настроили платежную систему для доступа к API, так как вы можете столкнуться с большим счетом в случае кражи ваших учетных данных. В частности, пример, который мы здесь показали делает вставьте ключ API прямо в код - мы сделали это с целью демонстрации процедуры. Однако в производственной среде лучше указать переменные среды для ключа, а не вставлять ключ напрямую.

instagram story viewer