Как сделать зум к области google maps?

Question

[Breeze1]

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

Сейчас зумит к последней метке, не могу правильно сделать это в цикле, чтобы при клике на метку, зумило именно к ней, а не последней

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(
            document.getElementById('map'),
            {center: new google.maps.LatLng(11.397, 30.644), zoom: 3});



        var iconBase =
            'http://web-dnepr.ru/earth/img/';

        var icons = {
          info: {
            icon: iconBase + 'map-marker.svg'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(18.425498298, -64.620497518),
            type: 'info'
          }, {
            position: new google.maps.LatLng(19.333332, -81.2166658),
            type: 'info'
          }, {
            position: new google.maps.LatLng(46.204391, 6.143158),
            type: 'info'
          }, {
            position: new google.maps.LatLng(48.864716, 2.349014),
            type: 'info'
          }, {
            position: new google.maps.LatLng(25.276987, 55.296249),
            type: 'info'
          }, {
            position: new google.maps.LatLng(55.751244, 37.618423),
            type: 'info'
          }, {
            position: new google.maps.LatLng(50.45466, 30.5238),
            type: 'info'
          }, {
            position: new google.maps.LatLng(31.963158, 35.930359),
            type: 'info'
          }, {
            position: new google.maps.LatLng(1.290270, 103.851959),
            type: 'info'
          }, {
            position: new google.maps.LatLng(53.350140, -6.266155),
            type: 'info'
          }
        ];

        // Create markers.
        for (var i = 0; i < features.length; i++) {
          var marker = new google.maps.Marker({
            position: features[i].position,
            icon: icons[features[i].type].icon,
            map: map
          });
        };
        map.addListener('center_changed', function() {
          // 3 seconds after the center of the map has changed, pan back to the
          // marker.
          window.setTimeout(function() {
            map.panTo(marker.getPosition());
          }, 3000);
        });

        marker.addListener('click', function() {
          map.setZoom(8);
          map.setCenter(marker.getPosition());
        });
        
      }
    </script>

Answer 1

[0xD34F]

function onMarkerClick(e) {
  map.setZoom(8);
  map.panTo(e.latLng);
}


for (const f of features) {
  const marker = new google.maps.Marker({
    position: f.position,
    icon: icons[f.type].icon,
    map,
  });
  marker.addListener('click', onMarkerClick);
}

Comments

[Breeze1]

Спасибо :)