Discussion :

[ambroise2017]

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]

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]

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é]

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

[NoSmoking]

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]

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