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:

<script type="text/javascript">
(function($) {

/**  new_map */

function new_map( $el ) {

// var
var $markers = $el.find('.marker');


// vars
// vars
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
},
styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]};  

// create map               
var 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
var 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;

$(document).ready(function(){

$('.acf-map').each(function(){

    // create map
    map = new_map( $(this) );

});

});

})(jQuery);

Now I want to add a button anywhere outside or inside the map only to have the option to reset the zoom and center to the initial state.

Any points in the right direction would be awesome.

Thanks!

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>