Google Maps JS API v3 - Простой пример с несколькими маркерами

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

Этот фрагмент JavaScript:

<script type="text/javascript">
  function initialize() {
    // Массив с данными о местоположениях
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    // Создаем карту
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    // Цикл для создания маркеров
    for (let i = 0; i < locations.length; i++) {  
      let marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      // Добавляем обработчик события для каждого маркера
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

Как это работает:

1. Инициализация карты: Функция initialize отвечает за создание карты и добавление маркеров. Она запускается только после загрузки библиотеки Google Maps.

2. Массив locations: Мы определяем массив locations, который содержит названия пляжей и их координаты.

3. Создание карты: С помощью google.maps.Map мы создаем карту, указывая уровень масштабирования (zoom) и центральные координаты.

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

5. Асинхронная загрузка скрипта: Функция loadScript создаёт элемент <script>, который загружает библиотеку Google Maps API. После загрузки скрипта автоматически вызывается функция initialize.

Резюме

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

Вот ответ на ваш вопрос, переведенный на русский в стиле StackOverflow:

Принятый ответ, переписанный в ES6:

$(document).ready(() => {
  const mapElement = $('#our_map').get(0); // Либо document.getElementById('our_map');

  // Отображаем карту на странице
  const map = new google.maps.Map(mapElement, { mapTypeId: 'roadmap' });

  const здания = [
    {
      title: 'Лондонский глаз, Лондон', 
      coordinates: [51.503454, -0.119562],
      info: 'карусель'
    },
    {
      title: 'Вестминстерский дворец, Лондон', 
      coordinates: [51.499633, -0.124755],
      info: 'дворец'
    }
  ];

  разместитьЗданияНаКарте(здания, map);
});

const разместитьЗданияНаКарте = (здания, map) => {
  // Проходим по массиву зданий и размещаем каждое на карте  
  const границы = new google.maps.LatLngBounds();
  здания.forEach((здание) => {
    const позиция = { lat: здание.coordinates[0], lng: здание.coordinates[1] };
    // Увеличиваем границы, чтобы включить новую позицию маркера
    границы.extend(позиция);

    const маркер = new google.maps.Marker({
      position: позиция,
      map: map,
      title: здание.title
    });

    const информационноеОкно = new google.maps.InfoWindow();
    // Даем каждому маркеру информационное окно
    google.maps.event.addListener(маркер, 'click', () => {
      информационноеОкно.setContent(здание.info);
      информационноеОкно.open(map, маркер);
    });

    // Автоматически центрируем карту, чтобы все маркеры были видны
    map.fitBounds(границы);
  });
}

Этот код создает карту с маркерами для указанных зданий в Лондоне. Каждое здание будет отображаться как маркер, при клике на который всплывает окно с дополнительной информацией.

Я знаю, что мой ответ запоздалый, но надеюсь, он поможет другим разработчикам. 😃

Следующий код добавляет несколько маркеров на карту Google с информационным окном. Этот код можно использовать для отображения любого количества маркеров на карте. Не забудьте вставить ваш ключ API Google Maps в указанное место в коде. (Я пометил это как "Ваш ключ API")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя карта Google</title>
    <style>
        #map{
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>

<h1>Моя карта Google</h1>
<div id="map"></div>

    <script>
        function initMap(){
          // Опции карты
            var options = {
                zoom:9,
                center:{lat:42.3601, lng:-71.0589}
            }
            // Создаем новую карту
            var map = new google.maps.Map(document.getElementById('map'), options);
            // Пользовательская иконка маркера
            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
            // Массив маркеров
            var markers = [
              {
                coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> Это ваш контент <h3>'
              },
              {
                coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> Это ваш контент <h3>'
              },
              {
                coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> Это ваш контент <h3>'
              }
            ];

            // Проходим по маркерам
            for(var i = 0; i < markers.length; i++){
              // Добавляем маркер
              addMarker(markers[i]);
            }

            // Функция для отображения маркеров на карте
            function addMarker (props){
              var marker = new google.maps.Marker({
                position: props.coords,
                map:map,
                icon:props.img
              });
              var infoWindow = new google.maps.InfoWindow({
                content:props.con,
              });
              marker.addListener("click", () => {
                infoWindow.open(map, marker);
              });
            }
        }
    </script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=**ВашКлючAPI**&callback=initMap"
      defer
    ></script>

</body>
</html>

Надеюсь, этот код будет вам полезен!

Вопрос: Как мне обновить свой код для работы с новым классом Advanced Marker Elements от Google Maps?

Ответ: Google обновляет класс маркеров на свои Advanced Marker Elements. Если вы хотите адаптировать свой код, приведённый ниже пример может помочь.

Вы можете увидеть обновленный пример кода на CodePen: Ссылка на CodePen.

Вот пример HTML и JavaScript кода:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-GOOGLE-API-KEY-GOES-HERE&callback=initMap&libraries=places,marker" async defer></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head> 
<body>
 
  <div id="map" style="width: 100%; height: 400px;"></div>

  <script type="text/javascript">
   function initMap() {
     
      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        mapId: 'google-maps',
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, show;

      jQuery.each(locations, function(i, v) { 

        // Логика показа маркера
        if (1 == 1) {
          show = map;
        } else {
          show = false;
        }

        marker = new google.maps.marker.AdvancedMarkerElement({
          position: new google.maps.LatLng(v[1], v[2]),
          map: show,
          title: v[0]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      });
    }
  </script>
</body>
</html>

Не забудьте заменить YOUR-GOOGLE-API-KEY-GOES-HERE на свой актуальный Google API Key. Для получения ключа следуйте этой инструкции.

Этот код делает следующее:

1. Создаёт карту с несколькими маркерами.
2. Использует условную логику, чтобы решать, показывать маркеры на карте или нет.
3. Добавляет событие click к каждому маркеру, чтобы открывать информационное окно при клике.

Надеюсь, это поможет вам в адекватной миграции на новый класс маркеров!