Простой пример множественных маркеров в Google Maps API

Быстрый ответ

Для того чтобы добавить на карту Google несколько маркеров, вам потребуется всего пара строк кода. Вот пример кода, которым можно воспользоваться:

// Определяем координаты для маркеров
var markersData = [
  { title: 'Локация 1', lat: 37.4232, lng: -122.0853 },
  { title: 'Локация 2', lat: 37.4289, lng: -122.1697 },
  { title: 'Локация 3', lat: 37.6153, lng: -122.3900 }
];

// Пришло время инициализировать карту!
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: { lat: markersData[0].lat, lng: markersData[0].lng }
  });

  // Размещаем маркеры на карте!
  markersData.forEach(function(location) {
    var marker = new google.maps.Marker({
      position: { lat: location.lat, lng: location.lng },
      title: location.title,
      map: map
    });

    // Добавляем информационные окна при клике
    marker.addListener('click', function() {
      var infoWindow = new google.maps.InfoWindow({ content: location.title });
      infoWindow.open(map, marker);
    });
  });
}

// Всё, можно начинать!
initMap();

Структура каждого маркера в markersData включает title, lat и lng. На этапе инициализации карты мы устанавливаем начальный центр и масштаб, затем с помощью forEach добавляем каждый маркер. Каждому маркеру присваивается информационное окно, которое появляется при клике, это обеспечивает интерактивность карты!

Работа с маркерами

Великое замыкание

Для эффективной работы с информационными окнами каждого маркера используем замыкания. Это поможет сохранять контекст для каждого маркера:

markersData.forEach(function(location, index) {
  var marker = new google.maps.Marker({
    position: { lat: location.lat, lng: location.lng },
    title: location.title,
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, index) {
    return function() {
      var infoWindow = new google.maps.InfoWindow({ content: location.title });
      infoWindow.open(map, marker);
    }
  })(marker, index));
});

Подробнее об этом расскажет наш спикер на видео

Кластеризация маркеров: группируем по смыслу!

Для работы с большим количеством маркеров будет полезен MarkerClusterer. Этот инструмент группирует близко расположенные маркеры в кластеры:

var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'путь/к/изображениям' });

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

Больше настроек – больше возможностей

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

Производительность – наше все!

Не забывайте проверять производительность ваших карт при большом числе маркеров. Проведите тесты с разным количеством точек (500, 1000 и более), чтобы убедиться в безупречной работе процесса рендеринга.

Визуализация

Попробуйте представить виртуальный тур по городу, населенный разнообразными местами:

🏨: Отель
🍔: Ресторан
🏦: Банк
🏖️: Пляж

На нашей карте мы обозначим следующие виды локаций, используя Google Maps JS API:

const locations = [
  { lat: -31.563910, lng: 147.154312, title: '🏨' },
  { lat: -33.718234, lng: 150.363181, title: '🍔' },
  { lat: -34.727552, lng: 135.889092, title: '🏦' },
  { lat: -34.728618, lng: 137.228134, title: '🏖️' },
];

Каждая локация становится остановкой в нашем путешествии:

🗺️ Карта: [🏨, 🍔, 🏦, 🏖️]
// Это как экскурсионный автобус, только в вашем управлении!

Ускоряем работу карты

Чтобы сделать работу карты ещё более эффективной, можно использовать следующие советы:

1. Рандомизация координат Lat/Lng – присвойте маркерам уникальность.
2. Асинхронная загрузка скрипта Google Maps API ускорит отображение страницы.
3. Использование индивидуальных иконок маркеров поможет различить разные типы мест.

Примеры кода для асинхронной загрузки Google Maps и добавления пользовательских иконок:

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap">
</script>

function initMap() {
  var customIcon = 'путь/к/вашей/индивидуальной/иконке.png';

  markersData.forEach(function(location) {
    var marker = new google.maps.Marker({
      position: { lat: location.lat, lng: location.lng },
      icon: customIcon,
      title: location.title,
      map: map
    });
    // и так далее...
  });
  // продолжаем инициализацию карты...
}

Полезные материалы

1. Обзор | Maps JavaScript API | Google for Developers — ваш компас в мире карт Google.
2. Справочник по Google Maps JavaScript API V3 | Google for Developers — подробный гид по API карт Google.
3. Google Maps JS API v3 – Простой пример с несколькими маркерами – Stack Overflow — опыт и помощь со стороны сообщества Stack Overflow.
4. Учебник по Google API — ваши первые шаги в изучении Google Maps API.
5. GitHub – apneadiving/Google-Maps-for-Rails — ресурсы для разработчиков Ruby.
6. AngularJS Google Maps V3 Directives — быстрый старт для AngularJS и Google Maps.