Afficher l'infobulle d'un marqueur sans clic

**Alain17** · 18/10/2013, 20h55

Bonjour,

Je ne connais pas grand’chose à JS. J’ai utilisé un code qui fonctionne bien mais que je souhaite modifier.
Sur une carte Google maps V3, je crée 10 marquers qui ont chacun une infobulle qui s’ouvre quand on clique sur l’un des marqueurs.
Chaque marqueur est lié à une des 5 catégories cat0, cat1, cat2, cat3 et cat4.
Au chargement de la page
- le marqueur 1 de la catégorie cat0 est affiché par défaut.
- les autres marqueurs sont invisibles
On peut rendre visibles ou invisibles les marqueurs d’une catégorie en cliquant sur les boutons ‘Afficher catégorie x’ / ‘Masquer catégorie x’

Jusque là tout va bien .

Mon problème : je souhaite que l’infobulle du marqueur 1 soit affichée dès le chargement de la page,sans clic de l’utilisateur sur le marqueur.
J’ai utilisé infowindow.open(currentmap,gmarkers[1] ); mais ça ne fonctionne pas !

Qui peut m’aider SVP ?

Le code :

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
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="test1" style="width:600px;height:600px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=fr"></script>
<script type="text/javascript">
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
if (oldonload) { 
 oldonload(); 
} 
 func(); 
} 
}
} 
var geocoder = new google.maps.Geocoder();
var maptest1;
var gmarkers = [];
var infowindow;
var directions = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var current_lat = 0;
var current_lng = 0;
var memo_marker
 
function addMarker(latlng,title,content,category,icon,currentmap) {
	var marker = new google.maps.Marker({
		map:  currentmap,
		title : title,
		icon:  new google.maps.MarkerImage(icon, new google.maps.Size(57, 34)),
		position: latlng
	});
	content += '<br/>Marker n° '+gmarkers.length;
	id_name = 'marker_'+gmarkers.length;
	var html = '<div style="text-align:left;width:250px;" class="infoGmaps">'+content+'</div>';
	google.maps.event.addListener(marker, "click", function() {
	if (infowindow) infowindow.close();
		infowindow = new google.maps.InfoWindow({content: html});
		infowindow.open(currentmap,marker);
		currentmap.setCenter(new google.maps.LatLng(latlng.lat(),latlng.lng()),3);
	});
	marker.mycategory = category;
	gmarkers.push(marker);
	marker.setVisible(false);
}
 
function showCategory(category) {
	for (var i=0; i<gmarkers.length; i++) {
		if (gmarkers[i].mycategory == category) {
			gmarkers[i].setVisible(true);
		}
	}
}
 
function hideCategory(category) {
	for (var i=0; i<gmarkers.length; i++) {
		if (gmarkers[i].mycategory == category) {
			gmarkers[i].setVisible(false);
		}
	}
	if(infowindow) { infowindow.close(); }
}
 
function initializetest1() {
	var myLatlng = new google.maps.LatLng(48.8792,2.34778);
	var myOptions = {
		zoom: 7,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
 
	maptest1 = new google.maps.Map(document.getElementById("test1"), myOptions);
		var bds = new google.maps.LatLngBounds(new google.maps.LatLng(46.066925155122,-1.404000000000),new google.maps.LatLng(46.807258166781,-0.996000000000));
		maptest1.fitBounds(bds);
	google.maps.event.addListener(maptest1,"click",function(event) { if (event) { current_lat=event.latLng.lat();current_lng=event.latLng.lng(); }}) ;
	directions.setMap(maptest1);
	directions.setPanel(document.getElementById("route"))
	// Ajout des markers
    addMarker(new google.maps.LatLng("46.18834294264222","-1.0701799392700195"),"Les Dimeries","<strong>Les Dimeries<br/>Chez Claude et Alain<br/>Location de vacances près de La Rochelle</strong>","cat0","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.18834294264222","-1.0701799392700195"),"Les Dimeries","<strong>Les Dimeries<br/>Chez Claude et Alain<br/>Location de vacances près de La Rochelle</strong>","cat0","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.305378908786145","-1.40"),"St Martin","<strong>St Martin</strong>","cat1","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.174183321902574","-1.1"),"Chatelaillon-Plage","<strong>Chatelaillon-Plage</strong>","cat1","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.55","-1.0"),"St Martin","<strong>St Martin</strong>","cat2","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.8","-1.3"),"Chatelaillon-Plage","<strong>Chatelaillon-Plage</strong>","cat2","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.145","-1.40"),"St Martin","<strong>St Martin</strong>","cat3","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.3219","-1.1"),"Chatelaillon-Plage","<strong>Chatelaillon-Plage</strong>","cat3","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.205378908786145","-1.3669395446777"),"St Martin","<strong>St Martin</strong>","cat4","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
	addMarker(new google.maps.LatLng("46.074183321902574","-1.09588623046875"),"Chatelaillon-Plage","<strong>Chatelaillon-Plage</strong>","cat4","http://maps.gstatic.com/mapfiles/markers2/marker.png",maptest1);
 
	showCategory("cat0");
 
	infowindow.open(currentmap,gmarkers[1] ); // C'est la ligne qui me pose problème
}
addLoadEvent(initializetest1);	
</script>
<span class="titre">Gestion des marqueurs : </span>
<br />
<input type="button" onClick="showCategory('cat1');" value="Afficher catégorie 1"/>
<input type="button" onClick="hideCategory('cat1');" value="Cacher catégorie 1"/>
<br />
<input type="button" onClick="showCategory('cat2');" value="Afficher catégorie 2"/>
<input type="button" onClick="hideCategory('cat2');" value="Cacher catégorie 2"/>
<br />
<input type="button" onClick="showCategory('cat3');" value="Afficher catégorie 3"/>
<input type="button" onClick="hideCategory('cat3');" value="Cacher catégorie 3"/>
<br />
<input type="button" onClick="showCategory('cat4');" value="Afficher catégorie 4"/>
<input type="button" onClick="hideCategory('cat4');" value="Cacher catégorie 4"/>
</body>
</html>

**NoSmoking** · 19/10/2013, 12h03

Bonjour,
c'est une chose appréciée que le partage de la solution

!

**Alain17** · 19/10/2013, 12h20

En fait, j'ai créé une autre fonction JS juste pour le marker_0 où on ouvre l'infobulle pour ce marqueur :

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
 
 
function addMarkerFixe(latlng,title,content,category,icon,currentmap) {
		var marker = new google.maps.Marker({
			map:  currentmap,
			title : title,
			icon:  new google.maps.MarkerImage(icon, new google.maps.Size(57, 34)),
			position: latlng
		});
		id_name = 'marker_'+gmarkers.length;
		var html = '<div style="text-align:left;width:250px;" class="infoGmaps">'+content+'</div>';
			infowindowfixe = new google.maps.InfoWindow({content: html});
			infowindowfixe.open(currentmap,marker);
		currentmap.setCenter(new google.maps.LatLng(latlng.lat(),latlng.lng()),3);
 
 
		marker.mycategory = category;
		gmarkers.push(marker);
		marker.setVisible(true);
	}

Cordialement

Afficher l'infobulle d'un marqueur sans clic [Google Maps]

APIs Google

Discussions similaires

Partager

Partager