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