Эта страница переведена с помощью Cloud Translation API.

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

Введение

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

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

Начиная

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

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

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

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

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

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

Перейдите в консоль Google Cloud .
Создайте или выберите проект.
Нажмите «Продолжить» , чтобы включить API и все связанные с ним службы.
На странице «Учетные данные» получите ключ API (и установите ограничения ключа API). Примечание: если у вас есть существующий неограниченный ключ API или ключ с ограничениями браузера, вы можете использовать этот ключ.
Чтобы предотвратить кражу квот и защитить свой ключ API, см. раздел Использование ключей API .
Включить выставление счетов. Для получения дополнительной информации см. раздел Использование и выставление счетов .

Получив ключ 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, которые работают в режиме quirks, недействительны в режиме стандартов. В частности, все процентные размеры должны наследоваться от родительских блочных элементов, и если какой-либо из этих предков не указывает размер, предполагается, что они имеют размер 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 больше 0px, чтобы карта была видна. В этом случае 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 определяет уровень масштабирования карты. Zoom: 0 — это минимальный масштаб, отображающий всю Землю. Установите значение zoom выше, чтобы увеличить масштаб изображения Земли при более высоком разрешении.

Предложение карты всей Земли в виде одного изображения потребовало бы либо огромной карты, либо маленькой карты с очень низким разрешением. В результате изображения карт в Google Maps и 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

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

JSFiddle.net Google Cloud Shell

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

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

Узнайте больше о получении координат широты/долготы или преобразовании адреса в географические координаты.
Вы можете настроить параметры, такие как стиль и свойства, чтобы настроить карту. Для получения дополнительной информации о настройке карт прочтите руководства по стилю и рисованию на карте .
Используйте консоль инструментов разработчика в веб-браузере для тестирования и запуска вашего кода, чтения отчетов об ошибках и решения проблем с вашим кодом.
Для открытия консоли в Chrome используйте следующие сочетания клавиш:
Command+Option+J (на Mac) или Control+Shift+J (на Windows).
Чтобы получить координаты широты и долготы местоположения на Картах Google, выполните следующие действия.
1. Откройте Google Maps в браузере.
2. Щелкните правой кнопкой мыши точное местоположение на карте, координаты которого вам нужны.
3. Выберите Что здесь из появившегося контекстного меню. Карта отображает карточку в нижней части экрана. Найдите координаты широты и долготы в последней строке карточки.
Вы можете преобразовать адрес в координаты широты и долготы с помощью службы геокодирования. Руководства для разработчиков содержат подробную информацию о начале работы со службой геокодирования .

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

Введение

Начиная

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

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

Понять код

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

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

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

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

Машинопись

JavaScript

Понять код

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

Машинопись

JavaScript

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

Машинопись

JavaScript

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

Машинопись

JavaScript

CSS

HTML

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

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

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

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