In the Google Maps API V3, I’ve created a map object:
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
I will zoom in and pan on that map and to go back to the original view later, I’d like to save the zoom level and the center of the map. I try the following:
oldCenter = map.getCenter();
oldZoom = map.getZoom();
But the variables stay ‘undefined’. When I do the same thing in the console, I get the correct responses.
What am I doing wrong? Please let me know if more code is needed to find the answer or if it’s an obvious problem.
Thanks!
Full Code:
function initialize() {
// CUSTOM PLACES
var latlng = new google.maps.LatLng(51, 10);
var germany = new google.maps.LatLng(51, 10);
var myLatlng = new google.maps.LatLng(49,12);
// DEFINE STYLE
var styles = [
{
"stylers": [
{ "invert_lightness": true }
]
}
];
// MARKER STYLES
var coin_image = 'coin.png';
var merch_image = 'merch.png';
// DEFINE OPTIONS FOR MAP
var myOptions = {
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// CREATE MAP OBJECT
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
map.setOptions({styles: styles});
// select zoom, etc by defining 2 points
var southWest = new google.maps.LatLng(45,-10);
var northEast = new google.maps.LatLng(55,15);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
placeMarker(southWest);
placeMarker(northEast);
// Place Random Markers
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 50; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map,
icon: merch_image
});
var j = i + 1;
marker.setTitle(j.toString());
}
// TRANSACTION MARKERS
// ONE FULL CYCLE
// set marker
var trans_marker = new google.maps.LatLng(52.31799,13.241904);
var marker = new google.maps.Marker({
position: trans_marker,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello World!",
icon: coin_image
});
// HERE'S THE PROBLEM
// var oldCenter = map.getCenter();
// var oldZoom = map.getZoom();
console.log(map);
oldMap = map;
console.log(oldMap);
// console.log(oldZoom);
// console.log(oldCenter.toString());
// pan to marker
setTimeout(function() {map.panTo(trans_marker)}, startDelayed(3000));
// zoom in on marker
setTimeout(function() {zoomIn(ENDZOOM)}, startDelayed(1000));
// show info window
var contentString = "<h3>Döner @ Coco Banh</h3>";
contentString += ("<p>SumUp was used to pay for a Döner at Coco Banh in Berlin, Germany</p>");
var infowindow = new google.maps.InfoWindow({
content: contentString
});
setTimeout(function() {infowindow.open(map,marker)}, startDelayed(8000));
setTimeout(function() {infowindow.close()}, startDelayed(5000));
// zoom out again
setTimeout(function() {zoomOut(oldZoom)}, startDelayed(2000));
// center again
setTimeout(function() {map.panTo(oldCenter)}, startDelayed(8000));
}
infowindow = new google.maps.InfoWindow({
content: contentString
});
}
The problem is that the bounds and center are not set yet. To get them you need to do it in a listener on zoom_changed (for zoom); center_changed (for center). Available Map events are listed in the documentation, under events. You can use the addListenerOnce to only do it once (the first time).
Something like this will work:
proof of concept fiddle
You won’t be able to use them until after those events have fired.
code snippet: