Повышение интерактивности ваших веб-приложений — мечта каждого начинающего разработчика, и использование Google Maps API поможет вам в этом. Возможно, вы просто хотите показать местонахождение посетителя на карте или отобразить ряд бизнес маркерами. В этой статье вы сможете следовать пошаговому руководству, от получения ключа API до отображения булавок (также известных как маркеры) на карте. Напоминаем, что для получения ключа API вам потребуется доступ к дебетовой/кредитной карте, счету PayPal или банковскому счету. Однако с вас не будет взиматься плата, если количество запросов в месяц не превышает тысячи (1000). Приступаем к кодированию!
Инструменты: HTML, CSS и JavaScript.
Примечание. Приведенные примеры кодов взяты из документации Maps API.
Получение вашего API-ключа
Используя свою учетную запись Google, войдите в свою учетную запись при посещении следующей страницы: https://console.cloud.google.com/project/_/google/maps-apis/credentials. Когда вы войдете, нажмите Создать учетные данные, а затем выберите Ключ API. В последующем диалоговом окне отображается ваш новый ключ API, который вы будете использовать на следующем шаге. На той же странице Credentials убедитесь, что вы защищаете свой ключ (прочитайте следующий документ, чтобы узнать больше: https://developers.google.com/maps/api-security-best-practices#restricting-api-keys). В разделе Ключи API найдите только что созданный API и нажмите ОГРАНИЧИТЬ API ДЛЯ БЕЗОПАСНОЙ АККАУНТ. Выберите параметры, которые относятся к вам. Примечание. Не сообщайте свой ключ API никому за пределами вашей организации.
Визуализация карты: HTML
Прежде чем перейти к этому шагу, убедитесь, что у вас есть файл HTML с его шаблоном, а также ваши файлы CSS и JavaScript, связанные с ним.
В файле HTML нам нужно добавить раздел, предназначенный для карты, как таковой:
API загружается с помощью тега script, также включенного в HTML, который включает
- Атрибут aysnc, который обеспечивает загрузку и выполнение скрипта, и только после этого запускается карта.
- Атрибут src, который включает в себя, откуда загружается карта, а также ваш ключ API и функцию обратного вызова в качестве параметра.
Отрисовка карты: CSS
Поскольку пустые теги «div» не имеют высоты, мы должны установить ее сами, используя встроенный или внешний CSS.
Рендеринг карты: JavaScript
Помните функцию обратного вызова initMap? Теперь мы создаем его для создания экземпляра нового объекта карты. Этот объект имеет два свойства: center и zoom. Центр задает начальный центр карты, а масштаб — начальный уровень масштабирования карты. Чем выше это число, тем больше масштаб и выше качество. Для получения дополнительной информации о свойствах и методах карты перейдите по следующей ссылке: https://developers.google.com/maps/documentation/javascript/reference/map#Map.setCenter.
Для установки маркеров у вас есть два метода:
- Создание нового маркера внутри initMap:
2. Вне initMap создайте экземпляр маркера и вызовите его метод setMap:
В качестве испытания я предлагаю вам добавить свое собственное информационное окно в соответствии со следующей документацией:
Источники:
