Sélectionner un marker gmap3 par un bouton

**8livier** · 20/07/2013, 10h57

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** · 20/07/2013, 23h32

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

**8livier** · 21/07/2013, 01h27

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** · 22/07/2013, 16h40

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** · 28/07/2013, 10h43

oui je comprends bien...

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

**NoSmoking** · 31/07/2013, 23h22

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é

**NoSmoking** · 01/08/2013, 17h11

Un petit exemple

Interaction entre éléments du DOM et markers

**8livier** · 25/08/2013, 17h04

l'exemple que tu m'as donné est exactement ce que je souhaite faire...
Mais voila... j'ai encore un hic...

Je n'entrai les markers que par les adresse, je n'ai pas les coordonnées...

alors comment faire?

merci

**NoSmoking** · 28/08/2013, 14h03

Autant enregistrer en base les coordonnées plutôt que de faire de multiple géodécodages au risque d'avoir des google.maps.GeocoderStatus.OVER_QUERY_LIMIT et un retard à l'affichage de la page.

**8livier** · 31/08/2013, 10h24

je prends enfin un peu de temps pour partager la solution que j'ai trouvé et qui fonctionne... En fait j'ai fait un mixe entre ta proposition et des astuces trouvées ici ou là sur le web concernant gmap....
je ne voulais pas mettre la geolocalisation en bdd, car ca m'obligeait à retoucher l'administration de mon site.
J'ai tenté le geocoder mais j'ai été confronté au query_limit...
alors voila:
dites moi si vous trouvez le code propre et les améliorations possibles...

Merci

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id='liste'>
<!--Cette liste provient d'une requete à la BDD et les id sont incrémentées automatiquement: instmarker".$i".-->
<div class='Nom_Liste_Institution' id='instmarker0'><a class='titre_article' href='../70efdf2ec9b086079795c442636b55fb.htm' target='_parent' title="consulter">adress1</a></div>
<div  class='Nom_Liste_Institution'  id='instmarker1'><a class='titre_article' href='../c74d97b01eae257e44aa9d5bade97baf.htm' target='_parent' title="consulter">adress2</a></div>
<div  class='Nom_Liste_Institution'  id='instmarker2'><a class='titre_article' href='../9bf31c7ff062936a96d3c8bd1f8f2ff3.htm' target='_parent' title="consulter">adress3</a></div>
<div  class='Nom_Liste_Institution'  id='instmarker3'><a class='titre_article' href='../c51ce410c124a10e0db5e4b97fc2af39.htm' target='_parent' title="consulter">adress4</a></div>
<div  class='Nom_Liste_Institution'  id='instmarker4'><a class='titre_article' href='../6512bd43d9caa6e02c990b0a82652dca.htm' target='_parent' title="consulter">adress5</a></div>
<div  class='Nom_Liste_Institution'  id='instmarker5'><a class='titre_article' href='../d3d9446802a44259755d38e6d163e820.htm' target='_parent' title="consulter">adress6</a></div>
<div  class='Nom_Liste_Institution'  id='instmarker6'><a class='titre_article' href='../1679091c5a880faf6fb5e6087eb1b2dc.htm' target='_parent' title="consulter">adress7</a></div></div>
<div id="my_map"></div>

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
$(document).ready(function(){   
/*mouseout sur les div des institutions pour remttre le css init*/
$(".Nom_Liste_Institution").mouseout(function(){
	$(this).removeClass('liste_over');
});
/*mouseover sur les div des institutions pour retrouver l'id du marker correspondant:
id de l'institution=instmarker+i
id du marker correspondant: marker+i
*/
$(".Nom_Liste_Institution").mouseover(function(){
/*id du marker visé*/
var idSel=$(this).attr('id').substr(4);
/*on remet des icones verts à tous les markers*/
$("#my_map").gmap3({
			  get: {
				name:"marker",
				all: true,
				callback: function(objs){
				  $.each(objs, function(i, obj){
					obj.setIcon("http://maps.google.com/mapfiles/marker_green.png");
 
				  });
				}
			  }
})
/*on met un icone orange au maker selectionné*/
$("#my_map").gmap3({
				get: {
				id:idSel,
				all: true,
				callback: function(objs){
				  $.each(objs, function(i, obj){
					obj.setIcon("http://maps.google.com/mapfiles/marker_orange.png");
 
					//on recentre la map sur le marker
       				$("#my_map").gmap3("get").panTo(obj.getPosition());
					// et on applique les evenements du mouseover du marker
        			google.maps.event.trigger( this, 'mouseover', null);
				  });
				}
			  },
			});
});
 
$('#my_map').gmap3({
	//création des markers
  marker:{
    values:[
      {address:'86 rue Nollet 75017 PARIS',id:'marker0', data:'Adresse1'},{address:'162 rue de belleville 75020 PARIS',id:'marker1', data:'Adresse2'},{address:'10 boulevard BERTHIER 75017 PARIS',id:'marker2', data:'Adresse3'},{address:'88 rue Aubervilliers 75019 PARIS ',id:'marker3', data:'Adresse4'},{address:'19 bis rue Clément Marot  75008 PARISIII',id:'marker4', data:'Adresse4'},{address:'69 rue de la petite victoire 75009 PARIS',id:'marker5', data:'Adresse5'},{address:'10 rue Jacques Louvel Tessier 75010 PARIS',id:'marker6', data:'Adresse6'},      
 
    ],
	// definition de leur  icone
    options:{
      draggable: false,
	  icon:"http://maps.google.com/mapfiles/marker_green.png",
    },
    events:{
		//role du mouseover
      mouseover: function(marker, event, context){
		  //ajoute la class liste_over au div correspondant au marker
		  $("#inst"+context['id']).addClass('liste_over');
		  //change la couleur  de l'icone
		  marker.setIcon("http://maps.google.com/mapfiles/gmap_orange.png");
		  //ouverture de l'infobulle
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
 
 
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker, 
              options:{content: context.data}
            }
          });
        }
      },
	  //role du mouseout
      mouseout: function(marker, event, context){
		  //supression de la class liste_over pour un retour à l'initial du CSS du div concerné
		  $("#inst"+context['id']).removeClass('liste_over');
		  //retour de l'icon du marker init
		  marker.setIcon("http://maps.google.com/mapfiles/marker_green.png");
		  //fermeture de l'infobulle
        var infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.close();
        }
      }
    }
  } ,
  map:{
    options:{
      zoom: 12
    }
  },
 
});
 
});

**NoSmoking** · 31/08/2013, 19h06

je ne voulais pas mettre la geolocalisation en bdd, car ca m'obligeait à retoucher l'administration de mon site.

Cela ne m'apparaissait pas un problème insurmontable que d'ajouter 2 champs dans la BdD.

J'ai tenté le geocoder mais j'ai été confronté au query_limit...

dans ton cas le problème existe quand même et est géré par gmap3.

L'inconvénient que je trouve à cette méthode et que les contrôles sont déjà actif alors que les marqueurs ne sont pas encore en place lié au temps de géodécodage.

Le principal est que cela fonctionne, aussi pense au bouton

Sélectionner un marker gmap3 par un bouton [Google Maps]

APIs Google

Discussions similaires

Partager

Partager