@Evdokim001
PHP & WordPress developer

Как центрировать карту по координатам маркеров?

Есть полный код javascript карты с маркерами. Не могу установить функцию. Её цель, при нажатии на ссылку в простом блоке, карта должна центрироваться на определенном маркере.
<!DOCTYPE html>
<html lang="ru">
    <head>
        <style>
            #map {
    width: 100%;
    height: 400px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpGq29OMSBkq1LKrwMnu0IXP2CpDcyCHA"></script>
    </head>
    <body>
<div id="map_canvas" style="width:640px;height:480px;"></div>
        
        
         <div id="map" class="map"></div>
        <script>
          
var map, infoWindow;
  
function initMap() {
    var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641);
    var mapOptions = {
        center: centerLatLng,
        zoom: 8
    };
  
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
    // Создаем объект информационного окна и помещаем его в переменную infoWindow
    // Так как у каждого информационного окна свое содержимое, то создаем пустой объект, без передачи ему параметра content
    infoWindow = new google.maps.InfoWindow();
  
    // Отслеживаем клик в любом месте карты
    google.maps.event.addListener(map, "click", function() {
        // infoWindow.close - закрываем информационное окно.
        infoWindow.close();
    });
  
    // Перебираем в цикле все координата хранящиеся в markersData
    for (var i = 0; i < markersData.length; i++){
  
        var latLng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
        var name = markersData[i].name;
        var address = markersData[i].address;
  
        // Добавляем маркер с информационным окном
        addMarker(latLng, name, address);
 
    }
  
}
google.maps.event.addDomListener(window, "load", initMap);
  
// Функция добавления маркера с информационным окном
function addMarker(latLng, name, address) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: name
    });
  
    // Отслеживаем клик по нашему маркеру
    google.maps.event.addListener(marker, "click", function() {
  
        // contentString - это переменная в которой хранится содержимое информационного окна.
        var contentString = '<div class="infowindow">' +
                                '<h3>' + name + '</h3>' +
                                '<p>' + address + '</p>' +
                            '</div>';
  
        // Меняем содержимое информационного окна
        infoWindow.setContent(contentString);
  
        // Показываем информационное окно
        infoWindow.open(map, marker);
    });
}
google.maps.event.addDomListener(window, "load", initMap);
    var markersData = [
    {
        lat: 56.246205,     // Широта
        lng: 43.8964165,    // Долгота
        name: "Название 1", // Произвольное название, которое будем выводить в информационном окне
        address:"Адрес 1"   // Адрес, который также будем выводить в информационном окне
    },
    {
        lat: 56.2763807,
        lng: 43.94534,
        name: "Название 2",
        address:"Адрес 2"
    },
    {
        lat: 56.3144715,
        lng: 43.9922894,
        name: "Название 3",
        address:"Адрес 3"
    },
    {
        lat: 56.3244715,
        lng: 43.9822894,
        name: "Название 4",
        address:"Адрес 4"
    }
];
        google.maps.event.addListener(markersData,'click',function(){
			lat.close(), lng.close(), ;
			infowindow_2.open(map,marker_2);
		});
        </script>
        <div class="addr_item">
	<p>Адрес 1 <a href="javascript:google.maps.event.trigger(markersData[0],'click');">Показать на карте</a></p>
</div>
    </body>
  • Вопрос задан
  • 656 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
<div id="address-list"></div>

const addressList = document.querySelector('#address-list');

addressList.innerHTML = markersData.map((n, i) => `
  <div class="address-list-item">
    <span data-index="${i}">${n.name}</span>
  </div>
`).join('');

addressList.addEventListener('click', e => {
  const marker = markersData[e.target.dataset.index];
  if (marker) {
    map.setCenter(new google.maps.LatLng(marker.lat, marker.lng));
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы