Google map reset to initial state

Question

I\'m trying to find out how to add a \"reset to initial state\"-button.

I have a Google Map with markers for a few shop locations.

This is the code I use:

Answer 1

To reset the map to its initial state, do the same thing you do when you initialize your map. You don't need to redo everything, you can save the computed initial bounds in a global variable (as well as the map), then call map.fitBounds(bounds); when your reset button is clicked.

$("#reset_state").click(function() {
  infowindow.close();
  map.fitBounds(bounds);
})

proof of concept fiddle

code snippet:

(function($) {
  /**  new_map */
  function new_map($el) {
      var $markers = $el.find('.marker');
      var args = {
        zoom: 15,
        center: new google.maps.LatLng(0, 0),
        mapTypeControl: false,
        panControl: false,
        scrollwheel: false,
        streetViewControl: false,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.RIGHT_CENTER
        }
      };

      // create map               
      map = new google.maps.Map($el[0], args);
      // add a markers reference
      map.markers = [];
      // add markers
      $markers.each(function() {
        add_marker($(this), map);
      });
      // center map
      center_map(map);
      // return
      return map;
    }
    // create info window outside of each - then tell that singular infowindow to swap content based on click
  var infowindow = new google.maps.InfoWindow({
    content: ''
  });
  /**  add_marker */
  function add_marker($marker, map) {
      // var
      var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
      // create marker
      var marker = new google.maps.Marker({
        position: latlng,
        map: map
      });
      // add to array
      map.markers.push(marker);
      // if marker contains HTML, add it to an infoWindow
      if ($marker.html()) {
        // create info window
        liTag = $(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']");
        // console.log(liTag);
        // show info window when marker is clicked
        $(liTag).click(function() {
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
          map.setZoom(12);
          map.setCenter(marker.getPosition())
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
          map.setZoom(12);
          map.setCenter(marker.getPosition())
        });
        // close info window when map is clicked
        google.maps.event.addListener(map, 'click', function(event) {
          if (infowindow) {
            infowindow.close();
          }
        });
      }
    }
    /**  center_map */

  function center_map(map) {
      // vars
      bounds = new google.maps.LatLngBounds();
      // loop through all markers and create bounds
      $.each(map.markers, function(i, marker) {
        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        bounds.extend(latlng);
      });
      // only 1 marker?
      if (map.markers.length == 1) {
        // set center of map
        map.setCenter(bounds.getCenter());
        map.setZoom(16);
      } else {
        // fit to bounds
        map.fitBounds(bounds);
      }
    }
    /**  document ready */
    // global var
  var map = null;
  var bounds = null;
  $(document).ready(function() {
    $('.acf-map').each(function() {
      // create map
      map = new_map($(this));
    });
    $("#reset_state").click(function() {
      infowindow.close();
      map.fitBounds(bounds);
    })
  });
})(jQuery);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="reset_state" value="reset" />
<div class="aflista">
  <ul>Markers
    <li data-lat='40.7127837'>New York, NY</li>
    <li data-lat='40.735657'>Newark, NJ</li>
  </ul>
</div>
<div class="acf-map" id="map_canvas">
  <div class="marker" data-lat="40.7127837" data-lng="-74.00594130000002" data-title="New York, NY">New York, NY</div>
  <div class="marker" data-lat="40.735657" data-lng="-74.1723667" data-title="Newark, NJ">Newark, NJ</div>
</div>