Como habilitar el historial en la API de Google Maps (botones adelante-atrás del navegador)
Voy a explicar como hacer que funcione el historial utilizando la API de Google Maps, como lo hace por ejemplo panoramio o moneytrackin’.
Una vez completado el tutorial cada vez que modifiquemos la posición del mapa quedará guardado en el historial del navegador, con lo que podremos avanzar/retroceder con los botones del navegador.
Una de las cosas negativas de la tecnología AJAX es precisamente esta, el historial no funciona ya que cargamos dinámicamente el contenido de la página sin refrescar totalmente esta. El mismo truco sirve también para habilitar cualquier página AJAX.
Las herramientas que voy a utilizar es la librería javascript jQuery y su plugin jQuery.history.
El truquito que utiliza esta librería es generar URLs a fragmentos de página que sí los soporta el navegador, y entonces mediante javascript interpretar el texto que va después del símbolo # para cargar el contenido dinámico mediante AJAX. Por así decirlo, crea una URL reconocible para el navegador a partir de un estado de la página no-reconocible directamente :)
En el caso de nuestro ejemplo google maps crearemos URL en este formato:
http://tudominio.com/map.html#latitude/48.858205/longitude/2.294359/zoom/17
Con esta URL le decimos a la página que cargue el google maps y centre la vista del mapa a la latitud 48.858205, longitud 2.294359 y con el nivel de zoom 17 (A ver si alguien prueba estos parámetros en Google Maps y me responde qué sitio es ;))
Fichero map.html: Esqueleto de la página que mostrará el mapa. Importante incluir los 3 ficheros javascript que vamos a utilizar (jquery, jquery.history.js,map.js)
<title>Historial en Google Maps - http://www.victormartingarcia.com</title>
<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>
Fichero map.js: Código javascript para iniciar la API de Google Maps y habilitar el historial
var param_lat="-";
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);
}
}
Y esto es todo, sencillo verdad? Obviamente el código es mejorable (se aceptan sugerencias). Podéis descargar el ejemplo en este link
