Sélectionner un marker gmap3 par un bouton

Version imprimable

20/07/2013, 11h57
8livier

Sélectionner un marker gmap3 par un bouton

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
21/07/2013, 00h32
NoSmoking

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

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:

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..

22/07/2013, 17h40
NoSmoking

Citation:

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

moi pas du tout. :mrgreen:

Citation:

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.
28/07/2013, 11h43
8livier

oui je comprends bien...

Mais comment faire?? je n'arrive pas à sélectionner l'infowindow du marker correspndant... alors je cherche encore....:?
01/08/2013, 00h22
NoSmoking
Citation:

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.

Citation:

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:

1 2 3 oMarker.infoBulle = oInfo; // infoWindow concernée oMarker.element = oElem; // Elément en relation oElem.marker = oMarker; // marker lié
01/08/2013, 18h11
NoSmoking

Un petit exemple :fleche: Interaction entre éléments du DOM et markers
25/08/2013, 18h04
8livier

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
28/08/2013, 15h03
NoSmoking

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.

Ma solution

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:

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:

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
    }
  },
 
});
 
});

31/08/2013, 20h06
NoSmoking

Citation:

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.

Citation:

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 :resolu: