Добавьте карту Google с маркером с помощью JavaScript

Введение

В этом уроке показано, как добавить простую карту Google с маркером на веб-страницу. Он подходит для людей с начальным или средним уровнем знаний HTML и CSS, а также с небольшими знаниями JavaScript.

Ниже представлена карта, которую вы создадите с помощью этого руководства. Маркер установлен на горе Улуру (также известной как Айерс-Рок) в национальном парке Улуру-Ката-Тьюта.

Начиная

Создание карты Google с маркером на веб-странице выполняется в три шага:

  1. Получить ключ API
  2. Создать HTML-страницу
  3. Добавить карту с маркером

Вам нужен веб-браузер. Выберите известный браузер, например Google Chrome (рекомендуется), Firefox, Safari или Edge, в зависимости от вашей платформы, из списка поддерживаемых браузеров .

Шаг 1: Получите ключ API

В этом разделе объясняется, как аутентифицировать ваше приложение в API JavaScript Карт, используя ваш собственный ключ API.

Чтобы получить ключ API, выполните следующие действия:

  1. Перейдите в консоль Google Cloud .

  2. Создайте или выберите проект.

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

  4. На странице «Учётные данные» получите ключ API (и установите для него ограничения). Примечание: если у вас есть существующий ключ API без ограничений или ключ с ограничениями для браузера, вы можете использовать его.

  5. Чтобы предотвратить кражу квот и защитить свой ключ API, см. раздел Использование ключей API .

  6. Включить выставление счетов. Подробнее см. в разделе «Использование и выставление счетов» .

  7. Получив ключ API, добавьте его в следующий фрагмент кода, нажав «YOUR_API_KEY». Скопируйте и вставьте тег скрипта загрузчика, чтобы использовать его на своей веб-странице.

    <script>   (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({     key: "YOUR_API_KEY",     v: "weekly",     // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).     // Add other bootstrap parameters as needed, using camel case.   }); </script>

Шаг 2: Создайте HTML-страницу

Вот код простой веб-страницы HTML: 

<!doctype html> <!--  @license  Copyright 2019 Google LLC. All Rights Reserved.  SPDX-License-Identifier: Apache-2.0 --> <html>   <head>     <title>Add Map</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <h3>My Google Maps Demo</h3>     <!--The div element for the map -->     <div id="map"></div>      <!-- prettier-ignore -->     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})         ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>   </body> </html> 
index.html

Обратите внимание, что это очень простая страница с заголовком третьего уровня ( h3 ) и одним элементом div . Вы можете добавить на страницу любой контент по своему усмотрению.

Понять код

На этом этапе примера мы имеем:

  • Объявили приложение как HTML5 с помощью !DOCTYPE html .
  • Создан элемент div с именем «map» для хранения карты.
  • Загрузил Maps JavaScript API с помощью загрузчика bootstrap.

Объявите свое приложение как HTML5

Мы рекомендуем вам объявить настоящий DOCTYPE в вашем веб-приложении. В приведенных здесь примерах мы объявили наши приложения как HTML5, используя простой HTML5 DOCTYPE , как показано ниже:

<!DOCTYPE html>

Большинство современных браузеров отображают контент, объявленный с помощью этого DOCTYPE , в «стандартном режиме», что означает, что ваше приложение должно быть более кроссбраузерным. DOCTYPE также разработан с учётом возможности постепенного снижения производительности; браузеры, которые его не распознают, будут игнорировать его и использовать «режим совместимости» для отображения контента.

Обратите внимание, что некоторые CSS-коды, работающие в режиме совместимости, недействительны в стандартном режиме. В частности, все размеры, определяемые в процентах, должны наследоваться от родительских блочных элементов, и если какой-либо из этих родительских элементов не указывает размер, предполагается, что он имеет размер 0 x 0 пикселей. По этой причине мы включаем следующее объявление style :

<style>   #map {     height: 100%;   }   html, body {     height: 100%;     margin: 0;     padding: 0;   } </style>

Создать элемент div

Чтобы карта отображалась на веб-странице, необходимо зарезервировать для неё место. Обычно это делается путём создания именованного элемента div и получения ссылки на этот элемент в объектной модели документа (DOM) браузера.

Приведенный ниже код определяет область страницы для вашей карты Google. 

<!--The div element for the map --> <div id="map"></div>

На этом этапе обучения div отображается как просто серый блок, поскольку карта ещё не добавлена. Код ниже описывает CSS-код, который задаёт размер и цвет div .

/* Set the size of the div element that contains the map */ #map {     height: 400px; /* The height is 400 pixels */     width: 100%; /* The width is the width of the web page */ }

В приведённом выше коде элемент style задаёт размер div для вашей карты. Чтобы карта была видна, установите ширину и высоту div больше 0 пикселей. В данном случае высота div составляет 400 пикселей, а ширина — 100%, чтобы карта отображалась по всей ширине веб-страницы. Обратите внимание, что ширина div обычно определяется содержащим её элементом, а пустые div обычно имеют высоту 0. Поэтому высоту div всегда необходимо задавать явно.

Загрузите API JavaScript Карт

Загрузчик начальной загрузки подготавливает API JavaScript Карт к загрузке (библиотеки не загружаются до тех пор, пока не будет вызван importLibrary() ).

<script>   (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({     key: "YOUR_API_KEY",     v: "weekly",     // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).     // Add other bootstrap parameters as needed, using camel case.   }); </script>

Инструкции по получению собственного ключа API см. в разделе Шаг 3: Получите ключ API.

Шаг 3: Добавьте карту с маркером

В этом разделе показано, как загрузить API JavaScript Карт на вашу веб-страницу и как написать собственный код JavaScript, который использует API для добавления карты с маркером на ней.

Машинопись 

// Initialize and add the map let map; async function initMap(): Promise<void> {   // The location of Uluru   const position = { lat: -25.344, lng: 131.031 };    // Request needed libraries.   //@ts-ignore   const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;    // The map, centered at Uluru   map = new Map(     document.getElementById('map') as HTMLElement,     {       zoom: 4,       center: position,       mapId: 'DEMO_MAP_ID',     }   );    // The marker, positioned at Uluru   const marker = new AdvancedMarkerElement({     map: map,     position: position,     title: 'Uluru'   }); }  initMap();
index.ts

JavaScript 

// Initialize and add the map let map;  async function initMap() {   // The location of Uluru   const position = { lat: -25.344, lng: 131.031 };   // Request needed libraries.   //@ts-ignore   const { Map } = await google.maps.importLibrary("maps");   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");    // The map, centered at Uluru   map = new Map(document.getElementById("map"), {     zoom: 4,     center: position,     mapId: "DEMO_MAP_ID",   });    // The marker, positioned at Uluru   const marker = new AdvancedMarkerElement({     map: map,     position: position,     title: "Uluru",   }); }  initMap();
index.js

В приведенном выше коде библиотеки Map и AdvancedMarkerElement загружаются при вызове функции initMap() .

Понять код

На этом этапе обучения у нас есть:

  • Определили функцию JavaScript, которая создает карту в div.
  • Создан AdvancedMarkerElement для добавления маркера на карту.

Добавить карту

Приведённый ниже код создаёт новый объект Google Maps и добавляет к карте свойства, включая центр и уровень масштабирования. Сведения о других параметрах свойств см. в документации.

Машинопись 

// The location of Uluru const position = { lat: -25.344, lng: 131.031 };  // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;  // The map, centered at Uluru map = new Map(   document.getElementById('map') as HTMLElement,   {     zoom: 4,     center: position,     mapId: 'DEMO_MAP_ID',   } );
index.ts

JavaScript 

// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");  // The map, centered at Uluru map = new Map(document.getElementById("map"), {   zoom: 4,   center: position,   mapId: "DEMO_MAP_ID", }); 
index.js

Для каждой карты есть два обязательных параметра: center и zoom . В приведенном выше коде new Map() создаёт новый объект Google Maps. Свойство center указывает API, где центрировать карту.

Свойство zoom определяет уровень масштабирования карты. Масштаб: 0 — минимальный масштаб, отображающий всю Землю. Увеличьте значение масштабирования, чтобы увеличить масштаб изображения Земли при более высоком разрешении.

Чтобы представить карту всей Земли в виде одного изображения, потребовалась бы либо огромная карта, либо небольшая карта с очень низким разрешением. В результате изображения карт в Google Картах и Maps JavaScript API разбиваются на «фрагменты» и «уровни масштабирования». При низком уровне масштабирования небольшой набор фрагментов карты покрывает большую территорию; при более высоком уровне масштабирования фрагменты имеют более высокое разрешение и покрывают меньшую площадь. В следующем списке показан примерный уровень детализации, который можно ожидать на каждом уровне масштабирования:

  • 1: Мир
  • 5: Суша или континент
  • 10: Город
  • 15: Улицы
  • 20: Здания

Следующие три изображения отображают одно и то же местоположение Токио при уровнях масштабирования 0, 7 и 18.

Добавить маркер

Приведённый ниже код добавляет маркер на карту. Свойство position задаёт положение маркера.

Машинопись 

// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({   map: map,   position: position,   title: 'Uluru' });
index.ts

JavaScript 

// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({   map: map,   position: position,   title: "Uluru", });
index.js

Полный пример кода

Полный пример кода смотрите здесь:

Машинопись 

// Initialize and add the map let map; async function initMap(): Promise<void> {   // The location of Uluru   const position = { lat: -25.344, lng: 131.031 };    // Request needed libraries.   //@ts-ignore   const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;    // The map, centered at Uluru   map = new Map(     document.getElementById('map') as HTMLElement,     {       zoom: 4,       center: position,       mapId: 'DEMO_MAP_ID',     }   );    // The marker, positioned at Uluru   const marker = new AdvancedMarkerElement({     map: map,     position: position,     title: 'Uluru'   }); }  initMap();
index.ts

JavaScript 

// Initialize and add the map let map;  async function initMap() {   // The location of Uluru   const position = { lat: -25.344, lng: 131.031 };   // Request needed libraries.   //@ts-ignore   const { Map } = await google.maps.importLibrary("maps");   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");    // The map, centered at Uluru   map = new Map(document.getElementById("map"), {     zoom: 4,     center: position,     mapId: "DEMO_MAP_ID",   });    // The marker, positioned at Uluru   const marker = new AdvancedMarkerElement({     map: map,     position: position,     title: "Uluru",   }); }  initMap();
index.js

CSS 

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ #map {   height: 100%; }  /*   * Optional: Makes the sample page fill the window.   */ html, body {   height: 100%;   margin: 0;   padding: 0; } 
style.css

HTML 

<html>   <head>     <title>Add Map</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <h3>My Google Maps Demo</h3>     <!--The div element for the map -->     <div id="map"></div>      <!-- prettier-ignore -->     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})         ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>   </body> </html>
index.html

Попробуйте образец

Узнайте больше о маркерах:

Советы и устранение неполадок

  • Узнайте больше о получении координат широты и долготы или преобразовании адреса в географические координаты.
  • Вы можете настроить такие параметры, как стиль и свойства, чтобы настроить карту. Подробнее о настройке карт см. в руководствах по стилю и рисованию на карте .
  • Используйте консоль инструментов разработчика в веб-браузере для тестирования и запуска вашего кода, чтения отчетов об ошибках и решения проблем с вашим кодом.
  • Для открытия консоли в Chrome используйте следующие сочетания клавиш:
    Command+Option+J (на Mac) или Control+Shift+J (на Windows).

  • Чтобы получить координаты широты и долготы местоположения на Картах Google, выполните следующие действия.

    1. Откройте Google Maps в браузере.
    2. Щелкните правой кнопкой мыши точное место на карте, координаты которого вам нужны.
    3. В появившемся контекстном меню выберите пункт «Что здесь» . В нижней части экрана карты отображается карточка. Координаты широты и долготы указаны в последней строке карточки.

  • Вы можете преобразовать адрес в координаты широты и долготы с помощью сервиса геокодирования. Руководства для разработчиков содержат подробную информацию о начале работы с сервисом геокодирования .