Foros del Web » Programando para Internet » Javascript »

Marcadores en Google Maps según el nivel de zoom

Estas en el tema de Marcadores en Google Maps según el nivel de zoom en el foro de Javascript en Foros del Web. Hola, 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 ...
  #1 (permalink)  
Antiguo 02/07/2014, 08:23
 
Fecha de Ingreso: junio-2009
Mensajes: 12
Antigüedad: 14 años, 9 meses
Puntos: 6
Marcadores en Google Maps según el nivel de zoom

Hola,

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:
//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
Muchas gracias por la ayuda que puedan brindarme.
  #2 (permalink)  
Antiguo 04/07/2014, 03:59
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Marcadores en Google Maps según el nivel de zoom

Hola Aguilera:

Para tu propósito, lo que ofrece Google Maps son sus librerías MarkerClusterer y MarkerManager.

Creo que es lo más próximo a lo que consultas.

Personalmente trabajo más con la primera ya que me permite una mayor manipulación.

De cualquier modo la complejidad es muy baja para su implementación y hay abundante documentación.

Cualquier duda, me comentas.

P.D.: ¿No te has planteado trabajar con JSON en vez de XML?. La carga es más rápida y es muy fácil de manipular.

Saludos

Etiquetas: google, mapa, maps, marcadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:27.