Все готово!

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

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

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

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

Кластеризация маркеров

Обзор

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

См. карту ниже чтобы увидеть, как осуществляется кластеризация маркеров.

Число на кластере обозначает количество маркеров в нем. Обратите внимание, что по мере увеличения масштаба для местоположений с кластерами, последние начинает распадаться: числа на кластерах уменьшаются, а на карте появляются отдельные маркеры. Уменьшение масштаба карты снова консолидирует маркеры в кластеры.

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

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<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>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <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>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

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

Знакомство с кластеризацией маркеров

Библиотека MarkerClusterer использует сеточный метод кластеризации, при котором карта делится на квадраты определенного размера (меняющегося для каждого уровня масштабирования), и в каждом таком квадрате маркеры группируются. Для определенного маркера создается кластер, к которому добавляются маркеры в границах квадрата кластера. Процесс повторяется до тех пор, пока все маркеры не будут включены в ближайшие сеточные кластеры маркеров с учетом уровня масштабирования карты.

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

Чтобы отрегулировать положение кластера, чтобы показывалось среднее расстояние между всеми маркерами, заключенными в нем, можно использовать библиотеку MarkerClusterer. Можно также настроить библиотеку MarkerClusterer чтобы менять другие параметры, например размер сетки, значок кластера, текст кластера и прочие.

Добавление возможности кластеризации маркеров

Чтобы добавить возможность кластеризации, выполните следующие шаги.

  1. Загрузите библиотеку кластеризации маркеров и изображения с сайта GitHub и сохраните их на сервере, доступном вашему приложению.
    Библиотека JavaScript и файлы изображений для MarkerClusterer доступны в хранилище Google Maps на сайте GitHub. Загрузите или скопируйте с GitHub следующие файлы в доступное для вашего приложения место:

  2. Добавьте на свою страницу библиотеку кластеризации маркеров.

    В примере кода для данного руководства сценарий ниже указывает расположение файла библиотеки markerclusterer.js на https://developers.google.com.

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    

    Измените путь, указав место, куда вы сохранили этот файл.


  3. Добавьте возможность кластеризации маркеров в приложение.

    Следующий код добавляет возможность кластеризации маркеров на карту.

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    Этот пример передает массив markers в MarkerClusterer, а также указывает расположение всех пяти файлов изображений в параметре imagePath. Измените путь, указав место, куда вы сохранили эти файлы изображений.

Подробнее

Более сложные примеры кластеризации маркеров можно посмотреть в хранилище Google Maps на GitHub.

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

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