Google Maps v3 API - Automated smooth zoomIn to marker

Question

I am using Google Maps v3 inside a modal at my website and I was looking for the following feature: If a visitor clicks on a button, a modal appears. Inside the modal there is google maps with a marker. So far so good. Once the modal appears, the google maps should start a smooth auto zoom from zoom level 2 to zoom level 15 for example.

I am not sure if everybody understands what I mean therefore I found a link where you can see the animation effect I am trying to achieve. Please note that on the website there is google earth included. I want to make this effect using google maps:

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

I found many posts here on StackOverflow, also on Google but most topics describe how to achieve my goal with google maps v2.

Here is what I´ve tried. The modal opens and the marker is visible on the google maps card but that´s it. Not auto zoom effect is visible therefore my solution is not working.

<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

It looks like you are missing the third argument in the animateMapZoomTo method:

// 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);
  }
}

proof of concept fiddle

code snippet:

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>