Все готово!

Прежде чем приступить к разработке, ознакомьтесь с документацией для разработчиков.

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

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

Введение

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

Ниже приведена карта, которую вы создадите с помощью данного руководства.

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

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Попробуйте сделать это сами

Наведите указатель мыши на верхнюю правую часть блока кода, чтобы скопировать код или открыть его в JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Начало работы

Для создания карты Google с маркером на веб-странице необходимо выполнить следующие 3 шага.

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

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

Шаг 1: создание HTML-страницы

Ниже приведен код для простейшей веб-страницы в формате HTML.

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Обратите внимание, что это очень простая страница с заголовком 3-го уровня (h3), одним элементом div и элементом style, каждый из которых описывается в таблице ниже. Вы можете добавлять на веб-страницу любой контент.

Попробуйте сделать это сами

В верхнем правом углу примера кода имеются две кнопки. Нажмите левую кнопку, чтобы открыть пример в JSFiddle.

Понимание кода

В следующей таблице объясняется каждый раздел кода, приведенного выше.

Код и его описание
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Создает HTML-страницу, содержащую заголовок и основную часть.
<h3>My Google Maps Demo</h3>

Добавляет заголовок 3-го уровня в верхней части карты.
<div id="map"></div>

Определяет область страницы для карты Google.
На этой странице руководства div отображается в виде просто серого блока, поскольку карта еще не добавлена. Его серый цвет обусловлен CSS, который вы применили. См. ниже.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

Элемент style в заголовке страницы head указывает размер div для вашей карты.
Установите для ширины и высоты div значение больше 0 пикселей, чтобы карта отображалась.
В рассматриваемом случае для div устанавливается высота 500 пикселей и ширина, равная 100%, для отображения по всей ширине веб-страницы. Примените background-color: grey к div, чтобы просмотреть область вашей карты на веб-странице.

Шаг 2: добавление карты с маркером

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

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Попробуйте сделать это сами

В верхнем правом углу примера кода имеются две кнопки. Нажмите левую кнопку, чтобы открыть пример в JSFiddle.

Понимание кода

Обратите внимание, что в приведенном выше примере уже нет CSS, который окрашивал бы div в серый цвет. Это связано с тем, что теперь div содержит карту.

В следующей таблице объясняется каждый раздел кода, приведенного выше.

Код и его описание
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

script Загружает API из указанного URL.
Параметр callback задействует функцию initMap после полной загрузки API.
Атрибут async позволяет браузеру продолжить выполнение преобразования оставшейся части станицы во время загрузки API.
Параметр key содержит ваш ключ API. Вам не требуется собственный ключ API во время экспериментов с этим руководством в JSFiddle. Затем см. раздел Шаг 3: получение ключа API, чтобы узнать, как выяснить собственный ключ API.
<script>
  function initMap() {
  }
</script>

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

Добавьте эту функцию, чтобы найти картуdiv на веб-странице.
new google.maps.Map()

Добавьте этот новый объект Google Maps, чтобы создать карту в элементе div.
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

Добавьте свойства для карты, указав ее центр и уровень масштабирования. См. документацию, чтобы получить информацию о других параметрах.
Свойство center сообщает API-интерфейсу, где расположен центр карты. Координаты на карте указываются в следующем порядке: широта, долгота.
Свойство zoom определяет уровень масштабирования для карты. Масштабирование: 0 – самый низкий уровень масштабирование, при котором отображается вся планета. Установите более высокое значение масштабирования, чтобы увеличить масштаб отображения земной поверхности до более высокого разрешения.
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

Добавьте этот код, чтобы разместить маркер на карте. position устанавливает положение маркера.

Шаг 3: получение ключа API

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

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

  1. Перейдите в Google API Console.
  2. Создайте или выберите проект.
  3. Нажмите Continue для активации API и всех связанных служб.
  4. Получите Ключ API на странице Учетные данные (и установите ограничения для этого ключа API).

    Примечание. Если у вас есть действующий ключ API без ограничений или ключ с ограничениями для браузера, можете использовать его.

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

  6. (Дополнительно) Разрешите тарификацию. Дополнительную информацию см. в документе Ограничения на использование .

  7. Скопируйте весь код из руководства на этой странице в свой текстовый редактор. Если у вас нет текстового редактора, вот несколько рекомендаций. Вы можете использовать: Notepad++ (для Windows); TextEdit (для macOS); gedit, KWrite, среди прочих (для Linux).
  8. Замените значение параметра key в URL-адресе, указав свой ключ API (то есть, ключ API, который вы только что получили).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Сохраните этот файл с расширением .html, например, google-maps.html.

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

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

  • Используйте интерфейс JSFiddle, чтобы отобразить код HTML, CSS и JavaScript в отдельных панелях. Проверить выполнение кода и вывод отображения можно запустив его в панели Results.
  • Вы можете изменить параметры, такие как стиль и свойства, чтобы настроить карту. См. дополнительную информацию о настройке карт в документации о Maps JavaScript API.
  • Используйте консоль инструментов разработчика в своем веб-браузере, чтобы протестировать и запустить свой код, просмотреть отчеты об ошибках и устранить проблемы с кодом.

    Клавиши быстрого доступа для запуска консоли в Chrome: Command+Option+J (в Mac) или Control+Shift+J (в Windows).

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.