Введение
Из этого туториала вы узнаете, как добавить на веб-страницу простую карту Google с маркером. Он подходит людям с начальным или средним уровнем знаний HTML и CSS, а также небольшим знанием JavaScript.
Ниже представлена карта, которую вы создадите с помощью этого урока. Маркер расположен в Улуру (также известном как Айерс-Рок) в национальном парке Улуру-Ката Тьюта.
Начиная
Создание карты Google с маркером на вашей веб-странице состоит из трех шагов:
Вам нужен веб-браузер. Выберите из списка поддерживаемых браузеров известный, например Google Chrome (рекомендуется), Firefox, Safari или Edge, в зависимости от вашей платформы.
Шаг 1. Получите ключ API
В этом разделе объясняется, как выполнить аутентификацию вашего приложения в Maps JavaScript API с помощью вашего собственного ключа API.
Выполните следующие действия, чтобы получить ключ API:
Перейдите в облачную консоль Google .
Создайте или выберите проект.
Нажмите «Продолжить» , чтобы включить API и все связанные службы.
На странице «Учетные данные» получите ключ API (и установите ограничения ключа API). Примечание. Если у вас есть неограниченный ключ API или ключ с ограничениями браузера, вы можете использовать этот ключ.
Чтобы предотвратить кражу квот и защитить свой ключ API, см. Использование ключей API .
Включить биллинг. Дополнительную информацию см. в разделе «Использование и выставление счетов» .
Получив ключ API, добавьте его в следующий фрагмент, нажав «ВАШ_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>
Обратите внимание, что это очень простая страница с заголовком третьего уровня ( h3
) и одним элементом div
. Вы можете добавить на веб-страницу любой контент, который вам нравится.
Разобраться в коде
На этом этапе примера мы имеем:
- Приложение объявлено как HTML5 с использованием объявления
!DOCTYPE html
. - Создал элемент div с именем «map» для хранения карты.
- Загрузил API JavaScript Карт с помощью загрузчика начальной загрузки.
Объявите свое приложение как 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 обычно имеют нулевую высоту. По этой причине вы всегда должны явно устанавливать высоту 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();
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();
В приведенном выше коде библиотеки 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', } );
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", });
Для каждой карты есть две обязательные опции: center
и zoom
. В приведенном выше коде new Map()
создает новый объект карт Google. Свойство 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' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
Полный пример кода
Полный пример кода см. здесь:
Машинопись
// 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();
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();
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; }
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>
Попробуйте образец
Узнайте больше о маркерах:
Советы и устранение неполадок
- Узнайте больше о получении координат широты и долготы или преобразовании адреса в географические координаты.
- Вы можете настроить такие параметры, как стиль и свойства, чтобы настроить карту. Дополнительную информацию о настройке карт можно найти в руководствах по стилизации и рисованию на карте .
- Используйте консоль инструментов разработчика в своем веб-браузере, чтобы тестировать и запускать код, читать отчеты об ошибках и решать проблемы с кодом.
- Используйте следующие сочетания клавиш, чтобы открыть консоль в Chrome:
Command+Option+J (на Mac) или Control+Shift+J (в Windows). Выполните следующие действия, чтобы получить координаты широты и долготы местоположения на Картах Google.
- Откройте Карты Google в браузере.
- Щелкните правой кнопкой мыши точное место на карте, координаты которого вам нужны.
- В появившемся контекстном меню выберите «Что здесь» . На карте отображается карточка внизу экрана. Найдите координаты широты и долготы в последней строке карточки.
Вы можете преобразовать адрес в координаты широты и долготы с помощью службы геокодирования. Руководства для разработчиков содержат подробную информацию о начале работы со службой геокодирования .