google map api how to zoom in and then out by clicking one of several markers

Question

On a map I have various markers. Upon clicking a marker the user gets zoomed in and centered where that marker is to see details and the mapTypeId also changes from terrain to satellite.

I'd like to user to be able to click the marker again to zoom out, center the map and change the mapTypeId back to terrain.

The map initialization is here:

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    zoom: 11,
    center: new google.maps.LatLng(-37.6756817,145.6690691),
    mapTypeId: 'terrain'
});
var mapzoom = map.getZoom(); 

We set an array of towns like this:

var locations = [
    // Healesville
    ['Town: <a href="#">Healesville</a>', -37.6534206,145.5117927, 'uploaded-images/marker-red-32h.png',0],
    // Warburton
    ['Town: <a href="#">Warburton</a>', -37.7514003,145.6919378, 'uploaded-images/marker-red-32h.png',1],
    [...],
    [...],
    [...]
];

The code for the first action to zoom-in is here:

var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        map.panTo(this.getPosition());
        map.setZoom(16);
        map.setMapTypeId('satellite'); 
    }
})(marker, i));

I commenced the second part to zoom back out with:

google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        if(zoomLevel > 11) {
            return function() {
                var center = new google.maps.LatLng(-37.6756817,145.6690691);
                map.setCenter(center);
                map.setZoom(11);
                map.setMapTypeId('terrain');
            }
        } else {
            return function() {
                map.panTo(this.getPosition());
                map.setZoom(16);
                map.setMapTypeId('satellite');
            }
        }
    })(marker, i));
}

Unfortunately the zoom-out script only worked on the last marker in the array of markers. Need to work out how to zoom out to the original setting for each marker on the map.

Answer 1

You only have a reference to the last marker in your zoom handling code (it is set to last value the last time through the loop). Simpler to just add the code to the marker click function. I think what you want is this:

var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    zoomLevel = map.getZoom();
    if (zoomLevel <= 11) {
      map.panTo(this.getPosition());
      map.setZoom(16);
      map.setMapTypeId('satellite');
    } else {
      var center = new google.maps.LatLng(-37.6756817, 145.6690691);
      map.setCenter(center);
      map.setZoom(11);
      map.setMapTypeId('terrain');      
    }
  }})(marker, i));
}

You may want to dynamically compute the center/zoom by computing the bounds of the displayed markers and calling map fit bounds with that bounds (rather than the code that is currently in the else.

proof of concept fiddle

code snippet:

 var zoomLevel; function initialize() { var map = new google.maps.Map(document.getElementById('map-canvas'), { scrollwheel: false, navigationControl: false, mapTypeControl: false, zoom: 11, center: new google.maps.LatLng(-37.6756817, 145.6690691), mapTypeId: 'terrain' }); var mapzoom = map.getZoom(); for (var i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: { lat: locations[i][1], lng: locations[i][2] }, map: map }) var markerListener = google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { zoomLevel = map.getZoom(); if (zoomLevel <= 11) { map.panTo(this.getPosition()); map.setZoom(16); map.setMapTypeId('satellite'); clickedMarker = marker; } else { var center = new google.maps.LatLng(-37.6756817, 145.6690691); map.setCenter(center); map.setZoom(11); map.setMapTypeId('terrain'); } } })(marker, i)); } } google.maps.event.addDomListener(window, "load", initialize); var locations = [ // Healesville ['Town: <a href="#">Healesville</a>', -37.6534206, 145.5117927, 'uploaded-images/marker-red-32h.png', 0], // Warburton ['Town: <a href="#">Warburton</a>', -37.7514003, 145.6919378, 'uploaded-images/marker-red-32h.png', 1], ]; 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>