Как добавить карту Google с маркером на свой сайт

Введение

Из этой инструкции вы узнаете, как добавить на веб-страницу простую карту 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;index.ts

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;index.js

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 */
}
style.css

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>index.html

Примеры кода

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

С чего начать

Процесс создания встроенной в веб-страницу карты Google с маркером состоит из трех этапов:

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

Для работы потребуется веб-браузер. Рекомендуем использовать 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>
index.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;index.ts

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;index.js

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 */
}
style.css

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>index.html

Примеры кода

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Как понять код

Во фрагменте кода ниже 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,
  }
);index.ts

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,
});index.js

Во фрагменте выше код 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,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

Подробнее о маркерах:

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 Картах:
1. Откройте Google Карты в браузере.
2. Нажмите правой кнопкой мыши на точку, координаты которой хотите получить.
3. В появившемся контекстном меню выберите Что здесь. Появится карточка в нижней части экрана, в последней строке которой записаны значения широты и долготы.
Преобразовать адрес в географические координаты можно с помощью службы геокодирования. Узнайте, как начать с ней работу.