8 простых примеров с несколькими маркерами в Google Maps JS API v3 на JavaScript

Введение

Google Maps JS API v3 предлагает разработчикам возможность создания интерактивных карт и встраивания их в веб-приложения. Одной из самых полезных и часто используемых функций является размещение маркеров на карте. В этой статье мы рассмотрим 8 простых примеров, демонстрирующих различные способы использования нескольких маркеров в Google Maps JS API v3 с помощью языка JavaScript.

Пример 1: Один маркер

Давайте начнем с примера, демонстрирующего создание одного маркера на карте:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var marker = new google.maps.Marker({
    position: {lat: -25.363, lng: 131.044},
    map: map,
    title: 'Маркер 1'
  });
}

Пример 2: Несколько маркеров с информацией

В этом примере мы добавим несколько маркеров на карту и прикрепим к ним информационные окна:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var markers = [
    {lat: -25.363, lng: 131.044, title: 'Маркер 1'},
    {lat: -33.890, lng: 151.274, title: 'Маркер 2'},
    {lat: -33.923, lng: 151.259, title: 'Маркер 3'}
  ];

  for (var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
      position: markers[i],
      map: map,
      title: markers[i].title
    });

    var infoWindow = new google.maps.InfoWindow({
      content: 'Информация о ' + markers[i].title
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
}

Пример 3: Функция для добавления маркеров

Чтобы упростить процесс добавления маркеров, мы можем создать функцию, которая будет принимать массив объектов с информацией о маркерах и добавлять их на карту:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var markers = [
    {lat: -25.363, lng: 131.044, title: 'Маркер 1'},
    {lat: -33.890, lng: 151.274, title: 'Маркер 2'},
    {lat: -33.923, lng: 151.259, title: 'Маркер 3'}
  ];

  addMarkers(map, markers);
}

function addMarkers(map, markers) {
  for (var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
      position: markers[i],
      map: map,
      title: markers[i].title
    });

    var infoWindow = new google.maps.InfoWindow({
      content: 'Информация о ' + markers[i].title
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
}

Пример 4: Добавление маркеров из массива координат

Допустим, у нас есть массив координат маркеров, и мы хотим добавить их на карту. Мы можем использовать метод forEach для итерации по массиву и добавления маркеров:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var markerCoordinates = [
    {lat: -25.363, lng: 131.044},
    {lat: -33.890, lng: 151.274},
    {lat: -33.923, lng: 151.259}
  ];

  markerCoordinates.forEach(function(coord) {
    var marker = new google.maps.Marker({
      position: coord,
      map: map
    });
  });
}

Пример 5: Определение маркеров по адресам

Google Maps JS API v3 также позволяет определять маркеры с помощью адресов, а не координат. В этом примере мы будем использовать Geocoding API для преобразования адреса в координаты:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var geocoder = new google.maps.Geocoder();

  var addresses = [
    'Москва, Россия',
    'Лондон, Великобритания',
    'Пекин, Китай'
  ];

  addresses.forEach(function(address) {
    geocoder.geocode({address: address}, function(results, status) {
      if (status === 'OK') {
        var marker = new google.maps.Marker({
          position: results[0].geometry.location,
          map: map,
          title: address
        });
      } else {
        console.error('Geocode was not successful for the following reason: ' + status);
      }
    });
  });
}

Пример 6: Размещение маркеров на клике

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var markers = [];

  map.addListener('click', function(event) {
    var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });

    markers.push(marker);
  });
}

## Пример 7: Удаление маркеров

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

```javascript
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var markers = [];

  document.getElementById('remove-markers').addEventListener('click', function() {
    markers.forEach(function(marker) {
      marker.setMap(null);
    });

    markers = [];
  });

  map.addListener('click', function(event) {
    var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });

    markers.push(marker);
  });
}

Пример 8: Отключение перетаскивания маркера

По умолчанию маркеры в Google Maps JS API v3 могут быть перетащены. Однако в некоторых случаях мы можем захотеть отключить это поведение. В этом примере мы при создании маркера устанавливаем свойство draggable в false:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  var marker = new google.maps.Marker({
    position: {lat: -25.363, lng: 131.044},
    map: map,
    title: 'Маркер 1',
    draggable: false
  });
}

Заключение

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