Google map reset to initial state - google-maps

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>