Добавление карты Google с маркером на ваш сайт

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Введение

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

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

В разделе ниже показан весь код, необходимый для создания карты в этом руководстве.

Машинопись

// 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 с маркером на вашей веб-странице, нужно выполнить три шага:

  1. Создать HTML-страницу
  2. Добавить карту с маркером
  3. Получить 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>

Обратите внимание, что это очень простая страница с заголовком третьего уровня ( 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 выглядит как серый блок, потому что вы еще не добавили карту. Код ниже описывает CSS, который устанавливает размер и цвет div .

/**
 * @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 для добавления карты с маркером на ней.

Машинопись

// 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. Как только он загрузится, браузер приостановит работу и немедленно выполнит скрипт. key параметр содержит ваш ключ API.

См. Шаг 3. Получите ключ API , чтобы получить инструкции по получению собственного ключа API позже.

Код ниже содержит функцию initMap , которая инициализирует и добавляет карту при загрузке веб-страницы. Используйте тег script , чтобы включить свой собственный JavaScript, который содержит функцию initMap .

  function initMap() {}

Добавьте функцию document.getElementById() , чтобы найти div карты на веб-странице.

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

Машинопись

// 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 определяет уровень масштабирования карты. Масштаб: 0 — наименьшее масштабирование, отображающее всю Землю. Установите значение масштабирования выше, чтобы приблизить землю с более высоким разрешением.

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

Машинопись

// 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.

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

  1. Перейдите в облачную консоль Google .

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

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

  4. На странице Credentials получите ключ API (и установите ограничения для ключа API). Примечание. Если у вас есть неограниченный ключ API или ключ с ограничениями браузера, вы можете использовать этот ключ.

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

  6. Включить выставление счетов. Дополнительные сведения см. в разделе Использование и выставление счетов .

  7. Скопируйте весь код этого руководства с этой страницы в текстовый редактор.

  8. Замените значение key параметра в URL-адресе своим собственным ключом API (это ключ API, который вы только что получили).

    <script async
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    

  9. Сохраните этот файл с именем, оканчивающимся на .html , например index.html .

  10. Загрузите HTML-файл в веб-браузер, перетащив его с рабочего стола в браузер. Кроме того, двойной щелчок по файлу работает в большинстве операционных систем.

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

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

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