markers zoom scale

Me gusta

14057 visitas

0

roberto carrillo
16/03/2016 17:02

Hola, tengo un problemita, cuando cambio el zoom del mapa solo me cambia el tamaño del último registro del array y no de todos los markers. Podrían ayudarme para que cambie el tamaño de todos?
Se vé que me falta alguna función para recorrer cada uno de los datos y cambiarle el tamaño del marker, pero no se como hacerlo.
Muchas gracias.

<div align="center" id="map1"></div>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map1'), {
mapTypeControl: false,
streetViewControl: false,
zoom: 14,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
center: {lat:-34.828379,lng:-57.966273}
});

var accidentes = [
<?php
for ($i=0; $i<$CantidadDeLineas; $i++)
{echo "['ACCIDENTE: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>
];

function setMarkers(map) {
var markerImage = new google.maps.MarkerImage(
'img/accidente.png',
new google.maps.Size(30.5,30.5), //size
null,//new google.maps.Point(0,0), // origin
null,//new google.maps.Point(285,325),
new google.maps.Size(30.5,30.5) //scale
);

for (var i = 0; i < accidentes.length; i++) {
var accidente = accidentes[i];

var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},
map: map,
icon: markerImage,
//animation: google.maps.Animation.DROP,
title: accidente[0]
});
}
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom=map.getZoom();
if(zoom==21){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(1900, 1900)));}
if(zoom==20){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(950, 950)));}
if(zoom==19){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(550, 550)));}
if(zoom==18){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(242, 242)));}
if(zoom==17){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(120, 120)));}
if(zoom==16){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(61, 61)));}
if(zoom==15){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}
if(zoom==14){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(15, 15)));}
if(zoom==13){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(9, 9)));}
if(zoom==12){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(4, 4)));}
if(zoom==11){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(1, 1)));}
});
}

setMarkers(map);}
</script>

Responder

Responder

Para comentar tienes que estar registrado. Registrate
0

Fernando Aroca
17/03/2016 10:14
Buenas compañero, creo que el problema lo tienes en que en el listener del cambio de zoom tienes que volver a recorrer el array y aplicar setIcon, te cambia solo el ultimo por que es el que se queda guardado del for anterior al addListener.
Comenta a ver si así funciona.
Un saludo.
Responder
- 0
  
  roberto carrillo
  17/03/2016 13:43
  Hola Fernando, traté de hacer lo que me indicaste y funcionó, a cada zoom le da el tamaño que deseo de marker. Pero se me presenta otro problema:
  se superponen, no me borra el anterior. Te paso como quedo:
  
  Responder
  - 0
    
    roberto carrillo
    17/03/2016 13:44
    google.maps.event.addListener(map, 'zoom_changed', function() {
    zoom=map.getZoom();
    if(zoom==15){
    for (var i = 0; i < accidentes.length; i++) {var accidente = accidentes[i];
    var marker = new google.maps.Marker({
    position: {lat: accidente[1], lng: accidente[2]},map: map,icon: markerImage,title: accidente[0]});
    marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}}
    
    if(zoom==16){
    for (var i = 0; i < accidentes.length; i++) {var accidente = accidentes[i];
    var marker = new google.maps.Marker({
    position: {lat: accidente[1], lng: accidente[2]},map: map,icon: markerImage,title: accidente[0]});
    marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(61, 61)));}}
    });
    Responder
    - 1
      
      Fernando Aroca
      17/03/2016 13:50
      El problema esta en que tu no estas recorriendo tu array de marcadores, estas creando nuevos marcadores, por eso se te superponen, debes recorrer el array y aplicarle la función setIcon.
      Saludos
      Responder
    - 1
      
      Fernando Aroca
      17/03/2016 13:54
      Bueno veo que no creas un array de marcadores, deberías crearlo e ir guardando cada marcador en el mismo para después poder recorrerlos.
      Algo así:
      
      var marcadores = [];
      
      for (var i = 0; i < accidentes.length; i++) {
      var accidente = accidentes[i];
      
      var marker = new google.maps.Marker({
      position: {lat: accidente[1], lng: accidente[2]},
      map: map,
      icon: markerImage,
      //animation: google.maps.Animation.DROP,
      title: accidente[0]
      });
      marcadores[i]= marker;
      }
      Responder
      - 1
        
        roberto carrillo
        17/03/2016 20:05
        No hay como ejercitar las neuronas. Me costó pero lo logré con tu ayuda. Generé el array de markers y le dí las nuevas pautas en los listen.
        Sos un grande y te estoy muy agradecido por el tiempo que usaste ayudándome. Muchísimas gracias!!!!!
        Responder
        1
        
        Fernando Aroca
        18/03/2016 11:33
        Perfecto compañero, encantado de que te haya podido ayudar, a veces dándole un poco al coco es mejor, jeje.
        Saludos.
        Responder
      - 0
        
        roberto carrillo
        17/03/2016 16:45
        Ok, si te tengo que ser sincero ...... me estoy rompiendo la cabeza con lo nada que se de javascript y no llego a entenderlo:
        La idea es que ponga?:
        
        var accidentes = [
        Responder
        0
        
        roberto carrillo
        17/03/2016 16:55
        algo asi?
        
        Responder
      - 0
        
        roberto carrillo
        17/03/2016 19:36
        Cambie:
        function setMarkers(map) {
        var markerImage = new google.maps.MarkerImage('img/accidente.png',new google.maps.Size(30.5,30.5), null, null, new google.maps.Size(30.5,30.5) );
        for (var i = 0; i < accidentes.length; i++) {
        var accidente = accidentes[i];
        var marker = new google.maps.Marker({
        position: {lat: accidente[1], lng: accidente[2]},
        map: map,
        icon: markerImage,
        //animation: google.maps.Animation.DROP,
        title: accidente[0]
        });}
        Por:
        function setMarkers(map) {
        var markerImage = new google.maps.MarkerImage('img/delito.png', new google.maps.Size(30.5,30.5), null, null, new google.maps.Size(30.5,30.5));
        
        var marcadores = [];
        for (var i = 0; i < accidentes.length; i++) {
        var accidente = accidentes[i];
        var marker = new google.maps.Marker({
        position: {lat: accidente[1], lng: accidente[2]},
        map: map,
        icon: markerImage,
        title: accidente[0]
        });
        marcadores[i]= marker;}}
        
        Responder

markers zoom scale

// Betabeers

// Participa

// Empresas

// Contacto