Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/11/2012, 12:34
deywibkiss
 
Fecha de Ingreso: mayo-2011
Mensajes: 105
Antigüedad: 13 años, 6 meses
Puntos: 3
Pregunta Evento mouseover marker google maps

Hola a todos.

He estado trabajando con el api de google maps.

Lo que quiero es crear un mapa con distintos marcadores dibujados. Ademas, que al pasar el mouse por encima de los markers se dispare una funcion que cambia la clase de un div asociado al id

El problema con mi codigo es que solo se construye el evento del ultimo marker en el ciclo for.... alguien me puede guiar?


Código Javascript:
Ver original
  1. function PintarMapaNegocios(objson,mapcanvas){
  2. //el objson corresponde a una coleccion de negocios traidos por otra funcion en formato json
  3.     //dibujar el mapa con las marquillas
  4.     var coordenadas = objson[0].negocios[0].negocio.coordenadas;
  5.     var latitud = coordenadas.substr(1,coordenadas.indexOf(",")-1);
  6.     var longitud = coordenadas.substring(coordenadas.indexOf(",")+1,coordenadas.indexOf(")")-1);
  7.     var latlng = new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud));
  8.  
  9. //opciones del mapa
  10.      var myOptions = {
  11.           zoom: 15,
  12.           center: latlng,
  13.           mapTypeId: google.maps.MapTypeId.ROADMAP
  14.         };
  15.  
  16. //inatanciar el mapa
  17.         var map = new google.maps.Map(document.getElementById(mapcanvas),
  18.             myOptions);
  19.  
  20. //establecer los limites del zoom
  21.         var limites = new google.maps.LatLngBounds();
  22.  
  23. //ciclo que recorre los objetos del array json y pinta un marker segun las coordenadas
  24.  
  25.     for(var i = 0; i < objson[0].negocios.length;i++){
  26.         var coord = objson[0].negocios[i].negocio.coordenadas;
  27.         var lat= coord.substr(1,coord.indexOf(",")-1);
  28.         var long= coord.substring(coord.indexOf(",")+1,coord.indexOf(")")-1);
  29.         var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));
  30.         var iconmarker = "http://www.yellowcg.com/images/icons/store.png";
  31.         var idnegocio = objson[0].negocios[i].negocio.idnegocio;
  32.  
  33. //se dibuja el marker correspondiente al objeto negocio i
  34.        
  35.         var marker = new google.maps.Marker({
  36.             position: latlng,
  37.             title:objson[0].negocios[i].negocio.nombre,
  38. //se añade una nueva propiedad al marker para despues usarla
  39.             idnegocio: objson[0].negocios[i].negocio.idnegocio,
  40.             icon:iconmarker,
  41.             animation:'drop',
  42.             map: map});
  43.        
  44.  
  45. //se añade el listener del evento mouseover con una funcion anonima que  cambia la clase del div #negocio
  46.         google.maps.event.addListener(marker,'mouseover',function(){
  47. //se accede a la propiedad idnegocio definida arriba
  48.             idn = marker.idnegocio;
  49.             console.log('has hecho mouse over sobre negocio'+idn)
  50.             $('#negocio'+idnegocio).addClass('negocio_on');
  51.         });
  52.  
  53. //se extiende el nivel de zoom para poder ver todos los marcadores dibujados
  54.         limites.extend(marker.position);
  55.            
  56.     }//fin for         
  57.    
  58.     map.fitBounds(limites);
  59.    
  60.    }