Google Maps v3 API - Автоматическое плавное увеличение масштаба маркера

Question

Я использую Google Maps v3 в модале на моем веб-сайте, и я искал следующую функцию: если посетитель нажимает кнопку, появляется модал. Внутри модальной части есть карты Google с маркером. Все идет нормально. Как только появится модальный режим, карты Google должны начать плавное автоматическое масштабирование, например, с уровня масштабирования 2 до уровня масштабирования 15.

Я не уверен, что все понимают, что я имею в виду, поэтому я нашел ссылку, где вы можете увидеть эффект анимации, которого я пытаюсь достичь. Обратите внимание, что на сайте есть Google Планета Земля. Я хочу сделать этот эффект с помощью карт Google:

https://earthengine.google.com/timelapse/?location=saudi-arabia

Я нашел много постов здесь в StackOverflow, также в Google, но большинство тем описывают, как достичь моей цели с помощью Google Maps v2.

Вот что я попробовал. Модал открывается, и маркер виден на карте Google Maps, но это все. Не отображается эффект автоматического масштабирования, поэтому мое решение не работает.

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 48.2092762, lng: 16.3737249},
            zoom: 15
        });

        // example marker:
        var marker = new google.maps.Marker({
            map: map,
            targetZoom: 22,
            position: new google.maps.LatLng(48.2092762,16.3737249)
        });

        // example marker:
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(48.2092762,16.3737249)
        });

        // the smooth zoom function
        function animateMapZoomTo(map, targetZoom) {
            var currentZoom = arguments[2] || map.getZoom();
            if (currentZoom != targetZoom) {
                google.maps.event.addListenerOnce(map, 'zoom_changed', function (event) {
                    animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
                });
                setTimeout(function(){ map.setZoom(currentZoom) }, 80);
            }
        }

    }
</script>


<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap"></script>

Answer 1

Похоже, вам не хватает третьего аргумента в методе animateMapZoomTo:

// the smooth zoom function
function animateMapZoomTo(map, targetZoom, commandedZoom) {
  var currentZoom = commandedZoom || map.getZoom();
  if (currentZoom != targetZoom) {
    google.maps.event.addListenerOnce(map, 'zoom_changed', function(event) {
      animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
    });
    setTimeout(function() {
      map.setZoom(currentZoom + (targetZoom > currentZoom ? 1 : -1))
    }, 250);
  }
}

подтверждение концепции скрипта

фрагмент кода:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 48.2092762,
      lng: 16.3737249
    },
    zoom: 2
  });

  // example marker:
  var marker = new google.maps.Marker({
    map: map,
    targetZoom: 22,
    position: new google.maps.LatLng(48.2092762, 16.3737249)
  });

  // the smooth zoom function
  function animateMapZoomTo(map, targetZoom, commandedZoom) {
    var currentZoom = commandedZoom || map.getZoom();
    if (currentZoom != targetZoom) {
      google.maps.event.addListenerOnce(map, 'zoom_changed', function(event) {
        animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
      });
      setTimeout(function() {
        map.setZoom(currentZoom + (targetZoom > currentZoom ? 1 : -1))
      }, 250);
    }
  }
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    console.log(map.getZoom());
    if (map.getZoom() < 3)
      animateMapZoomTo(map, 15);
    else if (map.getZoom() > 13)
      animateMapZoomTo(map, 2);
  })

}

#map {
  height: 80%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<input id="btn" value="click" type="button" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>