Niveles de zoom y gestores de marcadores

Lunes 5 de noviembre de 2007, por Horacio González Diéguez

Uno de los problemas a la hora de trabajar con google maps es lidiar con una gran cantidad de marcadores. La mayoria de los desarrolladores recomiendan que no haya mas de 200 marcadores en el mapa, por lo que cuando el número de marcadores es mayor es necesario establecer una estrategia para cargar solo una parte de los mismos. Con el fin de resolver este problema google ha creado un objeto llamado GMarkerManager que gestiona grupos de marcadores.

Este objeto se encarga de presentar en el mapa únicamente los marcadores que están en la porción visible del mapa y de eliminar aquellos que quedan mas alla de los límites. El objeto funciona de modo que cuando el usuario cambia la porción de mapa que esta viendo, aquellos marcadores que dejan de ser visibles, son eliminados y aquellos que son visibles, permanecen cargados o son cargados si fuera necesario porque no lo estubieran. De este modo es posible crear un número mucho más grande de marcadores, por ejemplo 500, sin que se carguen todos ellos a la vez en el mapa. Así no se cargan un excesivo numero de capas ocultas en el navegador y el mapa puede funcionar de un modo eficaz y ligero.

El problema es que este método solo resulta eficaz si se asegura que al reducir progresivamente el tamaño del mapa no acaben siendo visibles todos y cada uno de los marcadores del gestor. Dado que es posible reducir el mapa hasta ver todo el planeta resulta bastante sencillo que de esta posibilidad, si embargo es posible limitar entre qué máximo y mínimo zoom serán cargados los marcadores del gestor. La idea es sencilla; se trata agregar al gestor de marcadores distintos grupos de marcadores, cada uno de ellos para un determinado nivel de acercamiento. de modo que, cuando se vea gran parte del mapa, este contenga pocos marcadores, y en la medida que la porción de mapa visible se reduzca el mapa contenga mayor número de marcadores pero se vea solo una parte de los mismos.

El siguiente ejemplo gestiona todos los marcadores del proyecto escoitar.org por medio un GMarkerManager Primero se recogen los datos de ultimosSons.xml y se cargan 200 marcadores para los niveles del 0 al 10 en el gestor. Y, a continuación se recogen los datos de todolosSons.xml para cargar mas de 450 marcadores en el gestor que solo serán visibles a partir del nivel 10. La lectura de los marcadores es bastante rápida y el mapa se mueve con facilidad. Además el usuario apenas puede apreciar que en un momento inicial no estan cargados todos los marcadores porque su distribución es uniforme y porque cuando el nivel de zoom es suficiente para distinguir entre marcadores cercanos a partir del nivel 10 el gestor se encarga de mostrar aquellos que corresponden a la parte visible del mapa.

// se crea un objecto GmarkerManager para manejar los marcadores en el mapa.

var markerManager = new GMarkerManager(map);

//mediante HttpRequest se lee el documento xml que contiene los primeros 200 marcadores.

var request = GXmlHttp.create();
request.open("GET", "http://www.escoitar.org/ultimosSons.xml", true);
request.onreadystatechange = function() {
        if (request.readyState == 4) {

                //cuando el documento xml se haya cargado los datos que contien se cargan en una variable.

                var xmlDoc = request.responseXML;
                var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                //y para cada uno de los elementos "marker" que contenga el documento se agrega nuevo marcador al gestor que sera visible entre el nivel 0 y el 10.

                for (var i = 0; i < markers.length; i++) {
                        agregarMarcador(markers[i], 0, 10);
                }
                markerManager.refresh();
        }
};
request.send(null);

//se hace una segunda lectura mediante HttpRequest del documento que contiene todos los marcadores.

var request2 = GXmlHttp.create();
request2.open("GET", "http://www.escoitar.org/todolosSons.xml", true);
request2.onreadystatechange = function() {
        if (request2.readyState == 4) {

                //cuando el documento xml se haya cargado los datos que contien se cargan en una variable.

var xmlDoc = request2.responseXML;
                var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                //y para cada uno de los elementos "marker" que contenga el documento se agrega nuevo marcador al mismo gestor, solo que este marcador sera visible unicamente a partir del nivel 10.

for (var i = 0; i < markers.length; i++) {
                        agregarMarcador(markers[i], 10);
                }
                markerManager.refresh();
        }
};
request2.send(null);

- Mapa Completo

2015 VHPLab. I 2014 I 2013 I
English I Galego