nunca había trabajado con Google Maps, y mis conocimientos de javaScript son limitados, así que me di a la tarea de buscar y poco a poco he armado un script para lograr mi propósito. Hasta el momento he construido lo siguiente:
- Defino estilos para modificar la apariencia del mapa
- Creo el mapa y le asigno los estilos, inicia con un nivel de zoom específico
- Mando llamar datos de un archivo XML con los datos de ubicaciones
- Coloco los marcadores con esos datos, mediante una función for
Hasta este punto todo está bien. El siguiente paso que no he logrado saber cómo hacer, es que al cambiar el zoom del mapa se muestren unos u otros marcadores.
Dicho en otras palabras: cuando inicio el mapa en zoom 5 carga los marcadores Alfa que los toma de un XML, y quiero que cuando el zoom sea mayor a 7 desaparezca todos los marcadores Alfa y cargue los marcadores Beta desde otro archivo XML, siendo así que dependiendo del nivel de zoom puedo estar viendo los marcadores Alfa o Beta.
Entonces, lo que debo hacer es agregar un listener para que cuando el zoom sea 8 o mayor quite los Alfa y cargue los Beta, y cuando el zoom sea 7 o menos quite los Beta y cargue los Alfa.
Mi problema es que con el script actual que tengo, no sé como hacer lo de quitar marcadores y cargar otros.
Esto es lo que he realizado:
Código:
Muchas gracias por la ayuda que puedan brindarme. //creo los estilos del mapa
//cargo el mapa y le asigno los estilos
// Cargar los datos del XML
var Connect = new XMLHttpRequest();
Connect.open("GET", "xml/marcadores.xml", false);
Connect.setRequestHeader("Content-Type", "text/xml");
Connect.send(null);
var documento = Connect.responseXML;
var marcadores = documento.childNodes[0];
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < marcadores.children.length; i++)
{
var marcador = marcadores.children[i];
var ciudad = marcador.getElementsByTagName("ciudad");
var estado = marcador.getElementsByTagName("estado");
var latitud = marcador.getElementsByTagName("latitud");
var longitud = marcador.getElementsByTagName("longitud");
//genero un icono personalizado para los marcadores
var autobus = {
url: 'images/ciudad.png',
size: new google.maps.Size(16, 16),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(8, 8)
};
// genero el contenido para el globo de cada marcador
var contenido = "<div id=\"content\">"+
"<h2>"+ciudad[0].textContent.toString()+"</h2>"+
"<p>"+estado[0].textContent.toString()+"</p>"+
"</div>";
// Coloco el marcador
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitud[0].textContent.toString(),longitud[0].textContent.toString()),
icon: autobus,
map: map
});
// Agrega listeners para mostrar globo de texto al pasar encima
(function(marker, contenido){
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(contenido);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker,'mouseout', function(){
infowindow.close(map,marker);
});
})(marker,contenido);
}//termina el for
// Agrega listener al mapa para leer Zoom
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomActual = map.getZoom();
// Aquí mando llamar la función para quitar unos marcadores y colocar otros
});
}//termina la funcion
