Détection d'un infowindow suite au clique sur un marker

**ProgElecT** · 28/03/2017, 14h22

Salut

Mon niveau en JavaScript, 5, 6 mois, google.maps 1 mois, par contre plusieurs années de programmations en VB6, HTML, VBscript, se qui explique l’indentation du code

.

Pour ne pas dérouter l'utilisateur, j'ai instancié un évènement, clique gauche sur la carte, pour afficher des informations spécifiques.
Le résultat convient et retourne les bonnes informations.

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
<script>
	"use strict"; // force la déclaration des variables
	var Carte, OldInfWindow
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ChoixMap(input)
{
switch (input.value) 
	{
    case 'TERRAIN':
		Carte.setMapTypeId(google.maps.MapTypeId.TERRAIN);
        break;
    case 'ROADMAP':
		Carte.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        break;
    case 'SATELLITE':
		Carte.setMapTypeId(google.maps.MapTypeId.SATELLITE);
        break;
    case 'HYBRID':
		Carte.setMapTypeId(google.maps.MapTypeId.HYBRID);
	}
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function initMap()
{
    var mapCanvas;
	mapCanvas = document.getElementById("MaCarte");
	var mapOptions =
		{center: new google.maps.LatLng(46.0228868,6.6066035),
		mapTypeControl: false,
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.TERRAIN}; 
	Carte = new google.maps.Map(mapCanvas,mapOptions);
	//Ajouter un écouteur pour l'événement click ou rightclick sur la carte, 
	//pour affichage de l'adresse, l'altitude, la latitude et la longitude.
	Carte.addListener('click', function(event){displayLocationElevation(event.latLng)});
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function displayLocationElevation(location)
{	if (typeof(OldInfWindow) != 'undefined') OldInfWindow.close();// permet de fermer l'infos precedante
	var MyArr =  String(location);
	var CvString = MyArr.replace("(",""); CvString = CvString.replace(")","");
	var Tbl = CvString.split(",");
	var latlng = {lat: parseFloat(Tbl[0]), lng: parseFloat(Tbl[1])};
	var Latitude = Math.round(Tbl[0]*100)/100;
	var Longitude = Math.round(Tbl[1]*100)/100;
	var InfText1, InfText2;
	//------------------------------------------------------------------------------------------------------------
	var geocoder = new google.maps.Geocoder;
	//Lancer la requête pour recuperer l'adresse, code postal, ville et pays
	geocoder.geocode({'location': latlng}, function(results, status)
	{
	if (status === google.maps.GeocoderStatus.OK)
		{
		if (results[1]) //Récupérer le deuxieme element 
			{
			CvString = results[1].formatted_address;
			InfText1 = CvString.replace("Unnamed Road,", " ");
			ActuAffichage(InfText1,InfText2,location);
			}else{
			alert('Aucun résultat trouvé')
			}
		}else{
		alert('Geocodeur échec dû à: ' + status);
		}
	})
	//------------------------------------------------------------------------------------------------------------
	var elevator = new google.maps.ElevationService;
	//Lancer la requête pour recuperer l'altitude
	elevator.getElevationForLocations({'locations': [location]}, function(results, status)
	{
    if (status === google.maps.ElevationStatus.OK)
		{
		if (results[0]) //Récupérer le premier element
			{
			var Altitude = Math.round(results[0].elevation);
			InfText2 = "Altitude: " + Altitude + "M.<br> Latitude: " + Latitude + "°<br> Longitude: " + Longitude + "°";
			ActuAffichage(InfText1,InfText2,location);
			}else{
			alert('Aucun résultat trouvé')
			}
		}else{
		alert('Echec dû à: ' + status);
		}
	})
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ActuAffichage(Data1,Data2,location)
{
	if (typeof(Data1) != 'undefined') 
		{
		if (typeof(Data2) != 'undefined') 
			{
			//alert('A que coucou');
			var infowindow = new google.maps.InfoWindow({map: Carte});
			OldInfWindow = infowindow;
			infowindow.setContent("<h4>" + Data1 + "</h4>" + Data2);
			infowindow.setPosition(location);
			}
		}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
</script>

Le problème, suivant le zoom, un/des marqueurs apparaissent, l'utilisateur veut pouvoir cliquer dessus pour avoir l'information généré par le clique sur ce/ces marqueurs et non plus l'information spécifique généré par le code.

Dans le code, ligne 93, on peut voir que l'infowindow du marqueur est affiché, dans ce cas, ne serait il pas possible de détecter cette infowindow du marqueur, et dans ce cas quitter l'affichage spécifique.

Une solution, qui ne satisfait pleinement ni mois ni les utilisateurs, est de déclencher l'infowidows spécifique par clique bouton droit sur la carte, ce déclenchement n’étant pas très instinctif.

Merci d'avoir lut ce post, et de vos éventuelles réponses.

**NoSmoking** · 28/03/2017, 19h15

Bonjour,
pas trop saisi la nature du problème, normalement un clic sur un marqueur stoppe la propagation et répond à l'écouteur que l'on a mis dessus.
En ce qui concerne l'infoWindow il suffit d'utiliser une et une seule pour tout, mais ai-je tout bien percuté !?!!

Code :

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

1
2
3
4
5
6
7
8
var oMarker = new google.maps.Marker({
    'position': {'lat' : 46.023, 'lng': 6.61},
    'map': Carte
  });
oMarker.addListener('click', function(data){
    OldInfWindow.setContent("<h4>Youpi !</h4>");
    OldInfWindow.open( this.map, this);
  });

**ProgElecT** · 28/03/2017, 23h58

Merci de ta réponse

normalement un clic sur un marqueur stoppe la propagation et répond à l'écouteur que l'on a mis dessus

J'ai sans doute mal expliqué mon "problème".
Nom : Image6.gif
Affichages : 365
Taille : 12,7 Ko

Nom : Image2.gif
Affichages : 372
Taille : 49,0 Ko

Les marqueurs apparaissent tous seuls lors d'un zoom avant (grossissant) et disparaissent quand on zoom arrière.
Ces marqueurs sont visible pour tous les 4 google.maps.MapTypeId. hormis SATELLITE
Ce n'est pas moi qui les instancies, ce n'est pas moi qui cré l'infowindow lors du clique sur le/les marqueurs, du coup je n'ai ni le nom de l'objet marqueur ni de l'objet infowindow.
Ce que je cherche, c'est que lorsque je clique sur un marqueur, mon infowindow ne se substitut a celui que je ne gère pas, d’où l'essai ligne 93 si une infowindow autre que mon infowindow, alors return;

**NoSmoking** · 29/03/2017, 18h16

Donc ce ne sont pas des markers mais des POI et dans ce cas les données récupérées dans la fonction de callback ne sont pas les mêmes.

En cas de click sur un POI il est également transmis entre autres la propriété placeId, IconMouseEvent object specification , il te suffit donc de tester sa présence, si il n'est pas présent tu lances ta fonction dans le cas contraire tu laisses faire.

Code :

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

1
2
3
4
5
Carte.addListener('click', function(event){
    if( !event.placeId){     
      displayLocationElevation(event.latLng)
    }
}

**ProgElecT** · 29/03/2017, 19h15

beaucoup de t'être penché sur mon problème.

..........

Voici le code final, avec l'intégration de ta solution (ligne35)

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
	<HEAD>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<TITLE> Mes essais Google Map </TITLE>
	</HEAD> 
<script>
	"use strict"; // force la déclaration des variables
	var Carte, OldInfWindow;
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ChoixMap(input)
{
	switch (input.value) 
	{
    case 'TERRAIN':
		Carte.setMapTypeId(google.maps.MapTypeId.TERRAIN);
        break;
    case 'ROADMAP':
		Carte.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        break;
    case 'SATELLITE':
		Carte.setMapTypeId(google.maps.MapTypeId.SATELLITE);
        break;
    case 'HYBRID':
		Carte.setMapTypeId(google.maps.MapTypeId.HYBRID);
	}
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function initMap()
{
    var mapCanvas;
	mapCanvas = document.getElementById("MaCarte");
	var mapOptions =
		{center: new google.maps.LatLng(46.0228868,6.6066035),
		mapTypeControl: false,
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.TERRAIN}; 
	Carte = new google.maps.Map(mapCanvas,mapOptions);
	//Ajouter un écouteur pour l'événement click sur la carte, 
	//pour affichage de l'adresse, l'altitude, la latitude et la longitude.
	Carte.addListener('click', function(event){if( !event.placeId){displayLocationElevation(event.latLng)}})  
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function displayLocationElevation(location)
{	if (typeof(OldInfWindow) != 'undefined') OldInfWindow.close();// permet de fermer l'infos que j'ai instancié précédemment
	var MyArr =  String(location);
	var CvString = MyArr.replace("(",""); CvString = CvString.replace(")","");
	var Tbl = CvString.split(",");
	var latlng = {lat: parseFloat(Tbl[0]), lng: parseFloat(Tbl[1])};
	var Latitude = Math.round(Tbl[0]*100)/100;
	var Longitude = Math.round(Tbl[1]*100)/100;
	var InfText1, InfText2;
	//------------------------------------------------------------------------------------------------------------
	var geocoder = new google.maps.Geocoder;
	//Lancer la requête pour récupérer l'adresse (code postal,commune et pays)
	geocoder.geocode({'location': latlng}, function(results, status)
	{
	if (status === google.maps.GeocoderStatus.OK)
		{
		if (results[1]) //Récupérer le deuxième élément 
			{
			CvString = results[1].formatted_address;
			InfText1 = CvString.replace("Unnamed Road,", " ");
			ActuAffichage(InfText1,InfText2,location);
			}else{
			alert("Aucune information retournée")
			}
		}else{
		alert("Geocodeur échec dû à: " + status);
		}
	})
	//------------------------------------------------------------------------------------------------------------
	var elevator = new google.maps.ElevationService;
	//Lancer la requête pour recuperer l'altitude
	elevator.getElevationForLocations({'locations': [location]}, function(results, status)
	{
    if (status === google.maps.ElevationStatus.OK)
		{
		if (results[0]) //Récupérer le premier element
			{
			var Altitude = Math.round(results[0].elevation);
			InfText2 = "Altitude: " + Altitude + "M.<br> Latitude: " + Latitude + "°<br> Longitude: " + Longitude + "°";
			ActuAffichage(InfText1,InfText2,location);
			}else{
			alert("Aucune information retournée")
			}
		}else{
		alert("Echec dû à: " + status);
		}
	})
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ActuAffichage(Data1,Data2,location)
{
	if (typeof(Data1) != 'undefined') 
		{
		if (typeof(Data2) != 'undefined') 
			{
			var infowindow = new google.maps.InfoWindow({map: Carte});
			OldInfWindow = infowindow;
			infowindow.setContent("<h4>" + Data1 + "</h4>" + Data2);
			infowindow.setPosition(location);
			}
		}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
</script>
<body>
 
<h4>Mon premier Google Map</h4>
  <input type="radio" id="TypemapId" name="TypemapId" onclick="ChoixMap(this)" value="TERRAIN" checked> Terrain
  <input type="radio" id="TypemapId" name="TypemapId" onclick="ChoixMap(this)" value="ROADMAP"> Carte routière
  <input type="radio" id="TypemapId" name="TypemapId" onclick="ChoixMap(this)" value="SATELLITE"> Satellite
  <input type="radio" id="TypemapId" name="TypemapId" onclick="ChoixMap(this)" value="HYBRID"> Normales
 
<div id="MaCarte" style="width:90%;height:680px"></div>
 
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initMap"></script>
 
</body>
</html>

Pour faire fonctionner ce code, il vous faut remplacer, ligne 118, XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX par votre clef.

Détection d'un infowindow suite au clique sur un marker [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager