Введение
Из этой инструкции вы узнаете, как добавить на веб-страницу простую карту Google с маркером. Для этого достаточно будет начального или среднего уровня знаний HTML и CSS и базовых знаний JavaScript. Инструкции уровня специалистов доступны в руководстве для разработчиков.
Ниже показана карта, которую вы создадите с помощью этой инструкции. Маркером на карте отмечена скала Улуру (Айерс-Рок) в австралийском национальном парке Улуру – Ката-Тьюта.
Ниже приведен полный программный код, необходимый для создания карты по этой инструкции.
TypeScript
// Initialize and add the map function initMap(): void { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } window.initMap = initMap;
CSS
/* 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 */ }
HTML
<html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Примеры кода
С чего начать
Процесс создания встроенной в веб-страницу карты Google с маркером состоит из трех этапов:
Для работы потребуется веб-браузер. Рекомендуем использовать Google Chrome или другой популярный браузер (Firefox, Safari, Edge), поддерживаемый вашей платформой.
1. Создайте страницу HTML
Ниже приведен код HTML простейшей веб-страницы.
<!DOCTYPE html> <!-- @license Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Это простейшая веб-страница с заголовком уровня h3
и единственным элементом div
, на которую вы можете добавить контент по своему усмотрению.
Как понять код
Указанный ниже код создает страницу HTML, состоящую из заглавия и тела.
<html> <head> </head> <body> </body> </html>
Чтобы на странице появился заголовок, показанный в примере, добавьте эту строку кода.
<h3>My Google Maps Demo</h3>
Код ниже определяет область страниц, на которой появится карта Google.
<!--The div element for the map --> <div id="map"></div>
На этом этапе между тегами div
ничего нет, поэтому на экране появится серое поле. Код ниже задает размер и цвет блока div
с помощью стиля CSS.
/** * @license * Copyright 2019 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* 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 % видимой на экране области страницы.
2. Добавьте карту с маркером
Ниже показано, как подгрузить на странице Maps JavaScript API и написать фрагмент кода JavaScript, добавляющий с помощью этого API карту с маркером.
TypeScript
// Initialize and add the map function initMap(): void { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } window.initMap = initMap;
CSS
/* 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 */ }
HTML
<html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Примеры кода
Как понять код
Во фрагменте кода ниже script
загружает API по указанной ссылке URL.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Параметр callback
выполняет функцию initMap
после загрузки API. Атрибут async
разрешает браузеру обрабатывать остальную часть страницы во время загрузки API. Как только API будет загружен, браузер остановится и немедленно начнет выполнение скрипта. Параметр key
содержит ваш ключ API.
Инструкции по получению ключа см. в разделе 3. Получите ключ API.
Функция initMap
во фрагменте ниже инициализирует и добавляет карту при загрузке страницы. С помощью тега script
вы можете добавить свой собственный код JavaScript с функцией initMap
.
function initMap() {}
Добавьте функцию document.getElementById()
, чтобы найти на странице объект div
с картой.
Фрагмент кода ниже создает новый объект карт Google и добавляет свойства карты (центральную точку и масштаб). Информация о других свойствах объекта доступна здесь.
TypeScript
// The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } );
JavaScript
// The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, });
Во фрагменте выше код new google.maps.Map()
создает новый объект карт Google. Свойство center
сообщает API, где должен находиться центр карты.
Узнайте, как получить географические координаты и преобразовать в них адрес.
Свойство zoom
задает масштаб карты. Нулю соответствует самый мелкий масштаб (пользователь видит на экране всю планету). Чем больше значение свойства, тем крупнее масштаб видимой карты.
Код ниже помещает на карту маркер. Координаты маркера заданы в свойстве position
.
TypeScript
// The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, });
JavaScript
// The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, });
Подробнее о маркерах:
3. Получите ключ API
Ниже объясняется, как аутентифицировать ваше приложение в Maps JavaScript API с помощью ключа API.
Выполните следующие действия:
Войдите в Google Cloud Console.
Создайте или выберите проект.
Нажмите Continue для активации API и всех связанных служб.
На странице Credentials (Учетные данные) получите ключ API и задайте для него ограничения. Если у вас есть действующий ключ API без ограничений или ключ с ограничениями для браузера, можете использовать его.
Узнайте, как защитить свою квоту от посторонних и обезопасить ключ API.
Включите оплату. Инструкции
Скопируйте весь код из руководства на этой странице в текстовый редактор.
Замените значение параметра
key
в URL-адресе своим ключом API (тем, который вы получили только что).<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
Сохраните файл, добавив в конец его имени расширение
.html
(например,index.html
).Загрузите файл HTML в веб-браузер, перетянув его туда со своего компьютера (или просто откройте файл в браузере двойным нажатием мыши).
Советы и устранение неполадок
- Чтобы настроить отображение карты, меняйте стиль, свойства и другие переменные. Подробную информацию можно найти в руководствах по стилю и рисованию на карте.
- Используйте Инструменты разработчика в своем веб-браузере, чтобы тестировать и запускать свой код, просматривать отчеты об ошибках и устранять проблемы.
- Открыть консоль в Chrome можно сочетанием клавиш:
Command+Option+J (Mac) или Control+Shift+J (Windows). Чтобы получить географические координаты (широту и долготу) точки на Google Картах:
- Откройте Google Карты в браузере.
- Нажмите правой кнопкой мыши на точку, координаты которой хотите получить.
- В появившемся контекстном меню выберите Что здесь. Появится карточка в нижней части экрана, в последней строке которой записаны значения широты и долготы.
Преобразовать адрес в географические координаты можно с помощью службы геокодирования. Узнайте, как начать с ней работу.