title: Google map reset to initial state
body: <p>I'm trying to find out how to add a "reset to initial state"-button.</p>
  
  <p>I have a Google Map with markers for a few shop locations.</p>
  
  <p>This is the code I use:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (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);
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>Any points in the right direction would be awesome.</p>
  
  <p>Thanks!</p>