Discussion :

[8livier]

bonjour,

voila, sur un site, j'ai une carte gmap3 avec plusieurs marker.
Sous la map, j'ai des div affichant des éléments sur les lieux correspondant aux markers.

Je souhaiterais qu'au survol de ces div l'infowindow du marker correspondant s'ouvre et que l'icon du marker change....

Comment faire?

Merci

[NoSmoking]

Bonjour,
qu'est ce qui t'empêche de gérer cela à travers un événement onmouseover?

[8livier]

ce n'était pas simple car je ne connais pas gmap 3 .. mais en fait j'ai fait un truc:
pour info mes divs ont une id=INSTmarkerx (x étant incrémenté pour chacune des div)
et mes marker ont une id='markerx"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
$(".divOver").mouseover(function(){
var idSel=$(this).attr('id').substr(4);
$("#map").gmap3({
 get: {
name:"marker",
	all: true,
	callback: function(objs){
	$.each(objs, function(i, obj){
		obj.setIcon("http://maps.google.com/mapfiles/marker_orange.png");
	});
	}
			  }
})
$("#map").gmap3({
 get: {
	id:idSel,
	all: true,
	callback: function(objs){
	$.each(objs, function(i, obj){
	obj.setIcon("http://maps.google.com/mapfiles/marker_green.png");
	 });
	}
}
 
});
});

ce qui me permet de transformer la couleur des marker quand je survole les div...
Maintenant je voudrais ouvrir les infowindow correspondantes...

Et pour la bonne blague je souhaiterai faire l'inverse: quand je survole les marker je voudrais changer la classe des div correspondantes..

[NoSmoking]

ce n'était pas simple car je ne connais pas gmap 3

moi pas du tout.

Maintenant je voudrais ouvrir les infowindow correspondantes...

je dirais que tout doit se passer dans tes fonctions callback.

Il me semble que cela serait plus facile à gérer en javascript "traditionnel", mais je me trompe surement.

[8livier]

oui je comprends bien...

Mais comment faire?? je n'arrive pas à sélectionner l'infowindow du marker correspndant... alors je cherche encore....

[NoSmoking]

Mais comment faire??

il te suffit sur le onmouseover de tes éléments de transférer l'événement au marker en utilisant la méthode google.maps.event.trigger.

Si tu souhaites faire un aller/retour il convient que tu établisse une relation entre ton élément et le marker et vice versa.

je n'arrive pas à sélectionner l'infowindow du marker correspndant

Le plus simple dans ton cas et gérer une infoWindow par marker et d'établir également une relation entre les deux.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
oMarker.infoBulle = oInfo; // infoWindow concernée
oMarker.element = oElem;   // Elément en relation
oElem.marker = oMarker;    // marker lié