How to enable history in Google Maps API (Browser’s Back/Forward buttons)
Here is a tutorial to enable browser’s history when using Google Maps API, like in panoramio or moneytrackin’.
Once the tutorial will be completed each time we modify the position of the map it will be saved in browser’s history, and we’ll can go back/forward with browser’s buttons.
One of negative things of AJAX technology it’s this. The history doesn’t works because we load dinamically the page’s content without reload it completely.
The tools needed for do this tutorial are jQuery javascript library and its plugin jQuery.history.
The history plugin uses the trick of generate URLs to page fragments that are supported by the browser, and then with javascript parse the text after symbol # to load dinamically the requested content through AJAX. The plugin creates a recognizable URL for the browser from a unrecognizable state of the page itself :)
In our case we wil create an URL in this format:
http://yourdomain.com/map.html#latitude/48.858205/longitude/2.294359/zoom/17
With this URL the page will load google maps and will center the view at latitude 48.858205, longitude 2.294359 and zoom level 17 (Anybody can recognize the location of these parameters? ;))
File map.html: Template of map page. Remember to include the 3 external javascript files (jquery, jquery.history.js,map.js)
<script src="http://maps.google.com/maps?file=api&v=2&key=_YOUR_KEY_HERE_" type="text/javascript"></script>
<script type="text/javascript" src="inc/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.history.js"></script>
<script type="text/javascript" src="map.js"></script>
</head>
<div id="map" style="width:100%; height: 100%;"></div>
</body>
</html>
File map.js: Javascript code to init Google Maps API and enable browser’s history
var param_lng="-";
var param_zoom="-";$(document).ready(loadMap);
$(document).unload(GUnload);
var $j = jQuery.noConflict();
var _map;
function loadMap() {
if (GBrowserIsCompatible()) {
m = $("#map").get(0);
_map = new GMap2(m);
$.historyInit(historyChange);
if($.historyCurrentHash.replace(/^#/, ”) != ""){
var place = $.historyCurrentHash.replace(/^#/, ”).split("/");
if(place.length==6){
param_lat=place[1];
param_lng=place[3];
param_zoom=place[5];
}else if(place.length==4){
param_lat=place[1];
param_lng=place[3];
param_zoom=17;
}
}
_map.addControl(new GLargeMapControl());
_map.addControl(new GMapTypeControl());
_map.enableContinuousZoom();
_map.enableDoubleClickZoom();
_map.enableScrollWheelZoom();
if ((param_lat!="-") && (param_lng!="-")){
if(param_zoom=="-") param_zoom=17; //Default zoom level
_map.setCenter(new GLatLng(parseFloat(param_lat), parseFloat(param_lng)), parseFloat(param_zoom));
}else{
//Default map values
param_lat=40.413496;
param_lng=-3.032227;
param_zoom=1;
_map.setCenter(new GLatLng(40.413496, -3.032227), 1);
}
GEvent.addListener(_map, ‘moveend’, function() {
mapChangedListener();
});
//Disable mouse wheel page scroll
GEvent.addDomListener(_map.getContainer(), "DOMMouseScroll", wheelevent);
_map.getContainer().onmousewheel = wheelevent;
updateLinkToThisPage();
}
}
function wheelevent(e){
if (!e){
e = window.event;
}
if (e.preventDefault){
e.preventDefault();
}
e.returnValue = false;
}
function mapChangedListener(){
//Get current map parameters
param_lat=_map.getCenter().lat();
param_lng=_map.getCenter().lng();
param_zoom=_map.getZoom();
updateLinkToThisPage();
}
function updateLinkToThisPage() {
//Save map view parameters to the URL
var hash = "latitude/"+param_lat+"/longitude/"+param_lng+"/zoom/" + param_zoom;
var currentHash = $.historyCurrentHash.replace(/^#/, ”);
if (hash != currentHash) $.historyLoad(hash);
}
function historyChange(newLocation){
//Callback to set map view from URL parameters
if(param_lat=="-") return;
var place = newLocation.split("/");
if(place.length==6){
param_lat_new=parseFloat(place[1]);
param_lng_new=parseFloat(place[3]);
param_zoom_new=parseFloat(place[5]);
}else if(place.length==4){
param_lat_new=parseFloat(place[1]);
param_lng_new=parseFloat(place[3]);
param_zoom_new=parseFloat(17);
}else{
param_lat_new="-";
param_lng_new="-";
param_zoom_new="-";
}
if ((param_lat_new!="-") && (param_lng_new!="-") && ((param_lat_new!=_map.getCenter().lat())||(param_lng_new!=_map.getCenter().lng())||(param_zoom_new!=_map.getZoom()))){
_map.setCenter(new GLatLng(param_lat_new, param_lng_new), param_zoom_new);
}
}
And that’s all, easy isn’t it? Of course source code can be improved (suggerences are accepted). You can download the example files here
