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