Все готово!

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

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

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

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

Импорт данных на карты

Обзор

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

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

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}
<div id="map"></div>
/* 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;
}
 <!-- 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>
      /* 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>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Загрузка данных

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

Загрузка данных из того же домена

Слой данных Google Maps предоставляет контейнер для произвольных геопространственных данных (включая GeoJSON). Если данные размещены в том же домене, что и приложение Maps JavaScript API, их можно загрузить с помощью метода map.data.loadGeoJson(). Файл должен быть в том же домене, но его можно размещать в другом поддомене. Например, можно делать запрос к files.example.com из www.example.com.

map.data.loadGeoJson('data.json');

Загрузка данных из другого домена

Можно запросить данные и не из своего домена, если конфигурация другого домена разрешает такой запрос. Стандарт для такого разрешения называется совместным использованием ресурсов между разными источниками (CORS). Если домен разрешает выполнять запросы из других доменов, его заголовок ответа должен включать следующую декларацию:

Access-Control-Allow-Origin: *

Используйте инструменты Chrome Developer Tools (DevTools) чтобы проверить, включена ли в домене возможность CORS.

Загрузка данных из такого домена происходит точно так же, как загрузка JSON из того же домена:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Запрос JSONP

Для использования этого способа целевой домен должен поддерживать запросы JSONP.

Чтобы запросить JSONP, используйте createElement() для добавления тега script в заголовок своего документа.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

При выполнении сценария целевой домен передает данные как аргумент в другой сценарий, обычно под именем callback(). Целевой домен определяет имя сценария обратного вызова, которым является первое имя на странице при загрузке целевого URL-адреса в браузере.

Например, загрузка адреса http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp в окне браузера позволяет узнать, что именем сценария обратного вызова является eqfeed_callback.

Сценарий обратного вызова необходимо определить в коде:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Используйте метод addGeoJson(), чтобы разместить обработанные данные GeoJSON на карте.

Стилизация данных

Представление данных можно менять путем добавления данных GeoJSON в объект Map. Ознакомьтесь с подробной информацией по стилизации данных в руководстве разработчика.

Дополнительная информация

  • GeoJSON – это широко распространенный открытый формат шифрования географических данных на основе нотации объектов JavaScript (JSON). Инструменты и методы JavaScript, предназначенные для данных JSON, работают и с GeoJSON. Подробнее см. руководство разработчика.
  • JSONP означает расширенный JSON. Это метод связи, который применяется в программах JavaScript, выполняющихся веб-браузерах, для запроса данных с сервера в другом домене.

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

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