Mettre à jour titre et infowindows marqueurs

**ambroise2017** · 01/02/2017, 11h56

Bonjour,

Je réalise une carte basée sur l'API v3 de maps.
Je crée un marqueurCercle draggable entouré par un cercle suivant ce marqueur ->OK
J'ai placé d'autres marqueursLieu contenus dans un tableau de marqueurs sur lesquels j'ai une infowindows ->OK

Je place dans l'infowindows des marqueursLieu la distance entre ce marqueurLieu et mon MarqueurCercle ->OK

Mon probleme :
Comment mettre à jour dans l'infowindows des MarqueursLieu la nouvelle distance par rapport à mon centre du cercle (marqueurCercle) lorsque je déplace mon cercle ?

Pour le moment, mon code est le suivant :

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
 
for (var i = 0; i < tableauLieux.length; i++) {
var  Lieu = tableauLieux[i];
var pointLieu = new google.maps.LatLng(Lieu[5], Lieu[6]);
var distance = google.maps.geometry.spherical.computeDistanceBetween(centreCarte, pointLieu);
var OptionsMarqueurLieu = {
position: pointLieu,
map: maCarte,
Icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
title:Lieu[0]+'\n'+Lieu[1]+' '+'\n'+Lieu[2]+' '+Lieu[3]+'\n \n'+'Tel : '+Lieu[4]+'\n'+'Distance du foyer = '+ Math.round(distance)+' metres'
}
var MarqueurLieu = new google.maps.Marker(OptionsMarqueurLieu);
contenue = '<div id="conteneurInfoBulle">' +
                            '<h3>' + Lieu[0] + '</h3>' +
                            Lieu[1] + '<br />' +
                            Lieu[2] + ' '+Lieu[3]+'<br />' +
                            'Tel : ' + Lieu[4]+'<br />' +
							'<p> Distance du foyer = '+ Math.round(distance)+' metres'
                            '</div> ';
 
                bindInfoWindow(MarqueurLieu, contenue,maCarte);
 
}
// DEBUT AJOUT
google.maps.event.addListener( MarqueurCercle, "dragend", function( evenement ) {
MarqueurLieu.setmap(null);
for (var i = 0; i < tableauLieux.length; i++) {
var  Lieu = tableauLieux[i];
var pointLieu = new google.maps.LatLng(Lieu[5], Lieu[6]);
var distance = google.maps.geometry.spherical.computeDistanceBetween(MarqueurCercle.getLatLng(), pointLieu);
var OptionsMarqueurLieu = {
position: pointLieu,
map: maCarte,
Icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
title:Lieu[0]+'\n'+Lieu[1]+' '+'\n'+Lieu[2]+' '+Lieu[3]+'\n \n'+'Tel : '+Lieu[4]+'\n'+'Distance du foyer = '+ Math.round(distance)+' metres'
}
var MarqueurLieu = new google.maps.Marker(OptionsMarqueurLieu);
contenue = '<div id="conteneurInfoBulle">' +
                            '<h3>' + Lieu[0] + '</h3>' +
                            Lieu[1] + '<br />' +
                            Lieu[2] + ' '+Lieu[3]+'<br />' +
                            'Tel : ' + Lieu[4]+'<br />' +
							'<p> Distance du foyer = '+ Math.round(distance)+' metres'
                            '</div> ';
 
                bindInfoWindow(MarqueurLieu, contenue,maCarte);
 
}
});
// FIN AJOUT
}
 function bindInfoWindow(marqueur, info, NomCarte) {
 var infoBulle = new google.maps.InfoWindow();
            google.maps.event.addListener(marqueur, 'click', function() {
                infoBulle.setContent(info);
                infoBulle.open(NomCarte, marqueur);
            });
        }

Mes tentatives de mise à jour sont entre les lignes // DEBUT AJOUT et //FIN AJOUT

Merci de votre aide.
Cordialement

**NoSmoking** · 01/02/2017, 19h54

Bonjour,
j'ai du mal à visualiser ce que tu fais
- tu places des marqueurs sur une carte
- tu déplaces un « pointer »
- tu recalcules la position de chaque marqueur par rapport au « pointer »

Dans ce cas je stockerai cette valeur dans l'enregistrement des marqueurs et ne générerai le contenu de l'infoWindow qu'au moment de l'affichage de celle-ci.
Tu pourrais également pour chaque marqueur lui associer un contenu pour son infoWindow qui serait mis à jour en fin de déplacement du « pointer ».

**ambroise2017** · 02/02/2017, 09h26

Envoyé par NoSmoking

Bonjour,
j'ai du mal à visualiser ce que tu fais
- tu places des marqueurs sur une carte
- tu déplaces un « pointer »
- tu recalcules la position de chaque marqueur par rapport au « pointer »

Bonjour,

Oui, c'est ma logique pour le moment.
- Je place un pointeur et crée un cercle (de rayon fixe) autour de ce pointeur. Le pointeur est déplaçable et déplace le cercle correspondant.
- Je place un ensemble de marqueurs (fixes) et lors de l'ajout du marqueur, j'indique dans l'infowindow la distance entre ce marqueur et le pointeur.
Tout cela fonctionne à l'initialisation de la carte.

Par contre, ce que je voudrais, lorsque mon pointeur est "mal placé" ou nécessite d'être déplacé, que les distances pointeur-marqueurs soient mises à jour.

Je vais tenter de mettre le calcul de distance dans la fonction de création de l'infowindows des marqueurs.

Par contre, si une infowindows est ouverte, comment faire pour forcer la fermeture pour obliger la mise à jour ?

Merci de votre réponse et du temps consacré à mon soucis.
Cdlt

Invité · 02/02/2017, 10h21

Peut être une réponse ici et là.

**NoSmoking** · 02/02/2017, 19h38

Pour tout synchroniser, il me semble que le plus efficace est d'utiliser la méthode bindTo des objets google.maps.MVCObject pour mettre à jour le contenu de l'infoWindow associée aux markers.

Voici un exemple qui devrait te permettre de répondre à ta problématique tout en montrant comment faire.

Code html :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>Utilisation de bindTo pour mettre à jour distance entre markers</title>
<meta name="Author" content="NoSmoking">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
  background: #FFF;
}
#main {
  margin: auto;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
section {
  margin: 0 2em 1em;
}
a, code {
  color: #06C;
}
code {
  font: 1em/1.25 "Courier New",monospace;
}
.cadre_carte {
  width: 50em;
  height: 40em;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #ABC;
  border-radius: 5px;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte {
  width: 100%;
  height: 100%;
  margin: auto;
}
.bulle {
  font: 1rem/1.25 Verdana,sans-serif;
}
</style>
<script>
function initCarte() {
  // déclaration de quelques données
  var tData = [
    { lat:44.837368, lon:-0.576144, titre:'Bordeaux'},
    { lat:45.194276, lon:5.731633,  titre:'Grenoble'},
    { lat:45.767299, lon:4.834329,  titre:'Lyon'},
    { lat:43.297612, lon:5.381042,  titre:'Marseille'},
    { lat:48.856667, lon:2.350987,  titre:'Paris'}
  ];
  var urlIconePointer = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
  var urlIconeMarker  = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';
 
  var centre = new google.maps.LatLng(47, 1.8);
  var oInfo, oMarker;
  var oMap = new google.maps.Map(document.getElementById('div_carte'), {
    'backgroundColor': '#FFF',
    'zoom': 6,
    'center': centre,
    'zoomControlOptions': {
      'style': google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  });
  // le pointer référence
  var oPointer = new google.maps.Marker({
    'position': centre,
    'icon' : urlIconePointer,
    'zIndex' : 10,
    'draggable': true,
    'map': oMap
  });
  // création des marqueurs
  var i, nb = tData.length;
  for (i = 0; i < nb; i += 1) {
    // création du marker
    oMarker = new google.maps.Marker({
      'position': {'lat' : tData[i].lat, 'lng': tData[i].lon},
      'map': oMap,
      'icon': urlIconeMarker,
      'zIndex' : 0,
      'title': tData[i].titre
    });
    // création infobulle
    oInfo = new google.maps.InfoWindow({
      'marqueur': oMarker,
      'content': '<div class="bulle">' + tData[i].info + '</div>'
    });
    // gestion des liaisons
    oMarker.infoBulle = oInfo;
    // ajout evenement sur marker
    google.maps.event.addListener(oMarker, 'click', function () {
      // affichage InfoWindow
      this.infoBulle.open(this.getMap(), this);
    });
    // ajout evenement sur marker si pointer déplacé
    google.maps.event.addListener(oMarker, 'pointer_changed', function () {
      // récup. du pointer
      var pointer = this.get('pointer');
      // calcul de la distance
      var distance = google.maps.geometry.spherical.computeDistanceBetween(pointer, this.getPosition()) /1000;
      var km = distance.toFixed(3) + ' km';
      // modif. contenu infoBulle
      this.infoBulle.setContent('<div class="bulle">Distance au pointer : <br>' + km +'<\/div>');
    });
    // bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)
    oMarker.bindTo('pointer', oPointer, 'position');
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
 </script>
</head>
<body>
<div id="main">
  <header>
    <h1>Mise à jour distance entre markers</h1>
  </header>
  <section>
    <h2>Application</h2>
    <p>On utilise de la méthode <code>bindTo</code> des objets <code>google.maps.MVCObject</code> pour mettre à jour le contenu de l'infoWindow associée aux markers.</p>
    <p><code>bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)</code></p>
    <div class="cadre_carte">
      <div id="div_carte"></div>
    </div>
  </section>
  <section>
    <h2>Ressources</h2>
    <ul>
      <li><a href="https://developers.google.com/maps/documentation/javascript/reference#MVCObject">Les google.maps.MVCObject</a></li>
    </ul>
  </section>
</div>
</body>
</html>

**ambroise2017** · 03/02/2017, 10h19

Bonjour,

Merci pour cette réponse très complète.
Je teste dès que possible et vous tient informé.
Bonne journée (et bon week end anticipé)

Cordialement

**ambroise2017** · 03/02/2017, 14h18

Un ENOOOORRRMMMMMEEEEE merci à NoSmoking.

Le code fonctionne à merveille !

Plus de 15 jours à tourner en rond et finalement cette réponse clef en main qui fait à la perfection ce que je cherchais à réaliser.

Encore MERCI.

**NoSmoking** · 04/02/2017, 13h56

Tu aurais pu arriver à la même chose en bouclant sur tes markers dans la fonction affectée à l’événement « onmove » de ton marqueur référence, l'utilisation de la méthode bindTo améliorant , à mon sens, la lisibilité et la clarté du code tout en le simplifiant.

Tu peux regarder cet exemple qui utilise la méthode de la boucle : Distance entre 2 points ou point dans un rayon

**ambroise2017** · 06/02/2017, 09h06

Effectivement, je vais tenter une autre methode car je me suis aperçu que cela fonctionnait SAUF que toutes mes infobulles contenaient le même texte, hormis la distance qui était bien mise à jour.
Du coup, je perdais les coordonnées postales des marqueurs.

Je continue donc à plancher et vais tester l'evenement "onmove"

**NoSmoking** · 06/02/2017, 18h33

Du coup, je perdais les coordonnées postales des marqueurs.

Dans ce cas il ne te faut modifier qu'une partie du contenu de l'infoWindow.

Pour ce faire on peut passer par un « template ».

• Prenons l'exemple des données suivantes

Code :

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

1
2
3
4
5
6
7
8
// déclaration de quelques données
var tData = [
  { lat:44.837368, lon:-0.576144, titre:'Bordeaux',  info:'<b>Bordeaux</b><br>la suite du texte...<br>%dist'},
  { lat:45.194276, lon:5.731633,  titre:'Grenoble',  info:'<b>Grenoble</b><br>la suite du texte...<br>%dist'},
  { lat:45.767299, lon:4.834329,  titre:'Lyon',      info:'<b>Lyon</b><br>la suite du texte...<br>%dist'},
  { lat:43.297612, lon:5.381042,  titre:'Marseille', info:'<b>Marseille</b><br>la suite du texte...<br>%dist'},
  { lat:48.856667, lon:2.350987,  titre:'Paris',     info:'<b>Paris</b><br>la suite du texte...<br>%dist'}
];

on peut noter le %dist dans le texte de la propriété info et c'est cette occurrence et elle uniquement que l'on va modifier/remplacer.

• A la création de l'infoWindow on lui crée une propriété template que l'on initialise avec le contenu de info

Code :

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

1
2
3
4
5
6
// création infobulle
oInfo = new google.maps.InfoWindow({
  'marqueur': oMarker,
  'template' : '<div class="bulle">' + tData[i].info + '</div>',         // création du template
  'content': '' // rien dedans pour le moment par exemple
});

• Lors de la mise à jour de la distance il suffit d'utiliser la méthode replace et le tour est joué, tu peux même améliorer le rendu grâce au CSS
pour le CSS par exemple

Code css :

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

1
2
3
4
5
6
.bulle i.inf-distance {
  color: #069;
}
.bulle i.sup-distance {
  color: #F00;
}

et pour le remplacement par le valeur distance comme suit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// modif. contenu infoBulle
var contenu, change;
if( distance > 200){  // la valeur serait à gérer via une variable
  change = '<i class="sup-distance">' +km +'<\/i>';
}
else{
  change = '<i class="inf-distance">' +km +'<\/i>';
}
// remplace par valeur distance
contenu = this.infoBulle.template.replace('%dist', change);
this.infoBulle.setContent( contenu);

• L'exemple complet repris pour prendre en compte ces modifications

Code html :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>Utilisation de bindTo pour mettre à jour distance entre markers</title>
<meta name="Author" content="NoSmoking">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
  background: #FFF;
}
#main {
  margin: auto;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
section {
  margin: 0 2em 1em;
}
a, code {
  color: #06C;
}
code {
  font: 1em/1.25 "Courier New",monospace;
}
.cadre_carte {
  width: 50em;
  height: 40em;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #ABC;
  border-radius: 5px;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte {
  width: 100%;
  height: 100%;
  margin: auto;
}
.bulle {
  font: 1rem/1.25 Verdana,sans-serif;
}
.bulle i{
  font-size: .8em;
}
.bulle i.inf-distance {
  color: #069;
}
.bulle i.sup-distance {
  color: #F00;
}
 
</style>
<script>
function initCarte() {
  // déclaration de quelques données
  var tData = [
    { lat:44.837368, lon:-0.576144, titre:'Bordeaux',  info:'<b>Bordeaux</b><br>la suite du texte...<br>%dist'},
    { lat:45.194276, lon:5.731633,  titre:'Grenoble',  info:'<b>Grenoble</b><br>la suite du texte...<br>%dist'},
    { lat:45.767299, lon:4.834329,  titre:'Lyon',      info:'<b>Lyon</b><br>la suite du texte...<br>%dist'},
    { lat:43.297612, lon:5.381042,  titre:'Marseille', info:'<b>Marseille</b><br>la suite du texte...<br>%dist'},
    { lat:48.856667, lon:2.350987,  titre:'Paris',     info:'<b>Paris</b><br>la suite du texte...<br>%dist'}
  ];
 
  var urlIconePointer = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
  var urlIconeMarker  = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';
 
  var centre = new google.maps.LatLng(47, 1.8);
  var oInfo, oMarker;
  var oMap = new google.maps.Map(document.getElementById('div_carte'), {
    'backgroundColor': '#FFF',
    'zoom': 6,
    'center': centre,
    'zoomControlOptions': {
      'style': google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  });
  // le pointer référence
  var oPointer = new google.maps.Marker({
    'position': centre,
    'icon' : urlIconePointer,
    'zIndex' : 10,
    'draggable': true,
    'map': oMap
  });
  // création des marqueurs
  var i, nb = tData.length;
  for (i = 0; i < nb; i += 1) {
    // création du marker
    oMarker = new google.maps.Marker({
      'position': {'lat' : tData[i].lat, 'lng': tData[i].lon},
      'map': oMap,
      'icon': urlIconeMarker,
      'zIndex' : 0,
      'title': tData[i].titre
    });
    // création infobulle
    oInfo = new google.maps.InfoWindow({
      'marqueur': oMarker,
      'template' : '<div class="bulle">' + tData[i].info + '</div>',         // création du template
      'content': '' // rien dedans pour le moment par exemple
    });
    // gestion des liaisons
    oMarker.infoBulle = oInfo;
    // ajout evenement sur marker
    google.maps.event.addListener(oMarker, 'click', function () {
      // affichage InfoWindow
      this.infoBulle.open(this.getMap(), this);
    });
    // ajout evenement sur marker si pointer déplacé
    google.maps.event.addListener(oMarker, 'pointer_changed', function () {
      // récup. du pointer
      var pointer = this.get('pointer');
      // calcul de la distance
      var distance = google.maps.geometry.spherical.computeDistanceBetween(pointer, this.getPosition()) /1000;
      var km = distance.toFixed(3) + ' km';
      // modif. contenu infoBulle
      var contenu, change;
      if( distance > 200){  // la valeur serait à gérer via une variable
        change = '<i class="sup-distance">' +km +'<\/i>';
      }
      else{
        change = '<i class="inf-distance">' +km +'<\/i>';
      }
      // remplace par valeur distance
      contenu = this.infoBulle.template.replace('%dist', change);
      //this.infoBulle.setContent('<div class="bulle">Distance au pointer : <br>' + km +'<\/div>');
      this.infoBulle.setContent( contenu);
    });
    // bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)
    oMarker.bindTo('pointer', oPointer, 'position');
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
 </script>
</head>
<body>
<div id="main">
  <header>
    <h1>Mise à jour distance entre markers</h1>
  </header>
  <section>
    <h2>Application</h2>
    <p>On utilise de la méthode <code>bindTo</code> des objets <code>google.maps.MVCObject</code> pour mettre à jour le contenu de l'infoWindow associée aux markers.</p>
    <p><code>bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)</code></p>
    <div class="cadre_carte">
      <div id="div_carte"></div>
    </div>
  </section>
  <section>
    <h2>Ressources</h2>
    <ul>
      <li><a href="https://developers.google.com/maps/documentation/javascript/reference#MVCObject">Les google.maps.MVCObject</a></li>
    </ul>
  </section>
</div>
</body>
</html>

**ambroise2017** · 07/02/2017, 11h57

SPLENDIDE

(oui, j ai testé avant et là je suis sur)

Votre code, tres bien commenté, m'a permis de faire exactement ce que je souhaitais (même à ajouter la modification de couleur du marqueur en fonction du fait qu'il est ou non dans ma zone.

Cette fois le sujet est clos .

En renouvelant tous mes remerciements.

Mettre à jour titre et infowindows marqueurs [Google Maps]

APIs Google

Discussions similaires

Partager

Partager