Содержание
Чтобы вставить карту Google с маркером местоположения на свою веб-страницу, вам необходимо приобрести специальный программный ключ у Google, а затем добавить соответствующий JavaScript-код на страницу. Хотя этот процесс прост, он помогает, по крайней мере, иметь базовые знания HTML и JavaScript.
Получить ключ API Карт Google
Чтобы защитить свои серверы от бомбардировки запросами на карты и поиском местоположения, Google ограничивает доступ к своей базе данных Карт. Вы должны зарегистрироваться в Google в качестве разработчика, чтобы получить уникальный ключ для использования интерфейса прикладного программирования для запроса данных с серверов Карт. Ключ API является бесплатным, если вам не нужен сверхпрочный доступ к серверам Google (например, для разработки веб-приложения).
Чтобы зарегистрировать свой ключ API:
Перейдите в консоль Google Cloud Platform и, войдя в свою учетную запись Google, создайте новый проект или выберите существующий.
Нажмите Продолжить включить API и любые связанные сервисы.
На полномочия страница, получить Ключ API. При необходимости установите соответствующие ограничения на ключ.
Защитите свой ключ API, используя лучшие практики, рекомендованные Google.
Если вы считаете, что вам нужно, чтобы карта отображалась чаще, чем позволяет ваша бесплатная квота, установите соглашение о выставлении счетов с Google. Большинство веб-сайтов — особенно блоги с низким трафиком или нишевые сайты — вряд ли потребляют большую часть распределения квот.
Вставьте JavaScript в вашу веб-страницу
Вставьте следующий код на свою веб-страницу в разделе BODY документа HTML:
// Инициализация и добавление карты
function initMap () {
// Расположение флага
var flag = {lat: XXX, lng: YYY};
// Карта с центром в флаге
var map = new google.maps.Map (
document.getElementById ('map'), {zoom: 4, center: flag});
// Маркер, расположенный на флаге
var marker = new google.maps.Marker ({позиция: флаг, карта: карта});
}
SRC = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYcallback=initMap">
В этом коде измените следующее:
- замещать флаг с именем, которое ссылается на местоположение, которое вы закрепляете. Держите это простым и коротким (как дом или офис или Париж или Детройт). Вы можете запустить этот код, оставив флаг как есть, но изменение имени поддерживает повторное использование этого кода на той же странице, чтобы встроить несколько разных карт.
- замещать XXX а также YYY с широтой и долготой в десятичных размерах местоположения маркера карты. Вы должны заменить эти значения для правильного отображения карты. Простой способ найти широту и долготу - открыть Google Карты и щелкнуть правой кнопкой мыши точное местоположение, которое вы хотите пометить. В контекстном меню выберите Что здесь? просматривать широту и долготу.
- замещать YOUR_API_KEY с ключом API, который вы получили от Google. Не ставьте пробелы между знаком равенства и амперсандом. Без ключа запрос не будет выполнен, и карта не будет отображаться правильно.
Оптимальные практики
В заголовке HTML-документа укажите ограничения CSS для карты, включая размеры, цвета и размещение страницы.
Скрипт карты Google содержит такие атрибуты, как масштабирование и центр, которые открыты для изменения конечным пользователем. Этот более продвинутый метод поддерживается в документации разработчика Google.
API Карт Google является ценным активом. Инструкции Google по передовой практике предлагают отличный совет для защиты ключа от неправомерного использования другими. Надлежащая безопасность особенно важна, если вы настроили платежную систему для доступа к API, поскольку в случае кражи учетных данных вы можете столкнуться с большим счетом. В частности, пример, который мы показали здесь, встраивает ключ API непосредственно в код - мы сделали это с целью демонстрации процедуры. Однако в производственной среде лучше указывать переменные среды для ключа, а не вставлять ключ напрямую.
