Evento mouseover marker google maps

[deywibkiss]

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:

function PintarMapaNegocios(objson,mapcanvas){
//el objson corresponde a una coleccion de negocios traidos por otra funcion en formato json
    //dibujar el mapa con las marquillas
    var coordenadas = objson[0].negocios[0].negocio.coordenadas;
    var latitud = coordenadas.substr(1,coordenadas.indexOf(",")-1);
    var longitud = coordenadas.substring(coordenadas.indexOf(",")+1,coordenadas.indexOf(")")-1);
    var latlng = new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud));
 
//opciones del mapa
     var myOptions = {
          zoom: 15,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
//inatanciar el mapa
        var map = new google.maps.Map(document.getElementById(mapcanvas),
            myOptions);
 
//establecer los limites del zoom
        var limites = new google.maps.LatLngBounds();
 
//ciclo que recorre los objetos del array json y pinta un marker segun las coordenadas
 
    for(var i = 0; i < objson[0].negocios.length;i++){
        var coord = objson[0].negocios[i].negocio.coordenadas;
        var lat= coord.substr(1,coord.indexOf(",")-1);
        var long= coord.substring(coord.indexOf(",")+1,coord.indexOf(")")-1);
        var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));
        var iconmarker = "http://www.yellowcg.com/images/icons/store.png";
        var idnegocio = objson[0].negocios[i].negocio.idnegocio;
 
//se dibuja el marker correspondiente al objeto negocio i
        
        var marker = new google.maps.Marker({
            position: latlng,
            title:objson[0].negocios[i].negocio.nombre,
//se añade una nueva propiedad al marker para despues usarla
            idnegocio: objson[0].negocios[i].negocio.idnegocio,
            icon:iconmarker,
            animation:'drop',
            map: map});
        
 
//se añade el listener del evento mouseover con una funcion anonima que  cambia la clase del div #negocio
        google.maps.event.addListener(marker,'mouseover',function(){
//se accede a la propiedad idnegocio definida arriba
            idn = marker.idnegocio;
            console.log('has hecho mouse over sobre negocio'+idn)
            $('#negocio'+idnegocio).addClass('negocio_on');
        });
 
//se extiende el nivel de zoom para poder ver todos los marcadores dibujados
        limites.extend(marker.position);
            
    }//fin for          
    
    map.fitBounds(limites);
    
   }
 

[deywibkiss]

Lo he solucionado!!

Para aquellos que quieran la solucion, debemos declarar una funcion anonima dentro del ciclo for que se autoinvoca pasando los parametros de marker y idnegocio....

Con esto estamos creando una clausura o closure....

Aqui la funcion:

Código Javascript:

(function(marker, idnegocio){                       
            google.maps.event.addListener(marker, 'mouseover', function() {
                console.log('has hecho mouseover sobre el negocio '+idnegocio)
                $('#negocio'+idnegocio).addClass('negocio_on');
            });
        })(marker,idnegocio);
 

[portalmana]

Muchas gracias, estaba en lo mismo y tu código me salvo...

Saludos