Foros del Web » Programando para Internet » Javascript »

Evento mouseover marker google maps

Estas en el tema de Evento mouseover marker google maps en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/11/2012, 12:34
 
Fecha de Ingreso: mayo-2011
Mensajes: 105
Antigüedad: 8 años, 8 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.    }
  #2 (permalink)  
Antiguo 11/11/2012, 12:49
 
Fecha de Ingreso: mayo-2011
Mensajes: 105
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Evento mouseover marker google maps

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:
Ver original
  1. (function(marker, idnegocio){                      
  2.             google.maps.event.addListener(marker, 'mouseover', function() {
  3.                 console.log('has hecho mouseover sobre el negocio '+idnegocio)
  4.                 $('#negocio'+idnegocio).addClass('negocio_on');
  5.             });
  6.         })(marker,idnegocio);
  #3 (permalink)  
Antiguo 21/06/2014, 10:31
Avatar de portalmana  
Fecha de Ingreso: septiembre-2007
Ubicación: Montevideo-Uruguay
Mensajes: 633
Antigüedad: 12 años, 3 meses
Puntos: 80
Respuesta: Evento mouseover marker google maps

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

Saludos
__________________
"La imaginación es más importante que el conocimiento. El conocimiento es limitado, mientras que la imaginación no" -- A.Einstein
objetivophp.com,twitter.com/objetivophp

Etiquetas: evento+marker+google+maps, google_maps_api, marker, marker_google_maps
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 00:36.