Discussion :

[loribac]

Bonjour, j'utilise un fichier txt pour intégerer des makers peronalisés . C'est maker sont geolocalisés et exploité par l api tres correctement via un fichier txt qui est inclus en php. Je voudrais exploité un deuxième fichier pour générer qui lui devra généner des maker de couleur différent . comment puis je faire ..... Je vous present une partie du code . Merci d'avance de vos réponses.

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
 
 
 
var locations = [
 
<?php include("test/fog/fichier.txt");?>
 
];
 
 
var infowindow = new google.maps.InfoWindow();
var monIconPerso = new google.maps.MarkerImage("pictos/Point1.png"),i; <--------------- voici le premier maker eploité par le fichier txt ci-dessus
for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({
icon : monIconPerso,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
 
 
 
 
 
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
 
 
 
 
<div id="maCarte">&nbsp;</div>

Cordialement

[headmax]

Salut, c'est assez simple en réalité si tu suit la documentation : https://developers.google.com/maps/d...-markers?hl=fr
tu peux simplement créer une boucle pour chaque fichier chargé, soit regrouper tes fichier "merger" les datas pour faire une seule boucle et ajouter tes icons la ou tu souhaite sur la map.

exemple : schéma de données json qui peux provenir (d'une base donnée, d'un fichier (js sans ajax par simple chargement de la balise <script src="json.js">), par un ajax formatage du côté serveur du tableau json "Parsing" récupéré lors du "success" de l'appel)...

JS

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
 
var locations = [
  ['<b>Paris,</b><br> La cité des Titis', 48.8588377,2.2770197, 1, "http://www.aviewoncities.com/img/paris/nav_paris_icon.png"],
  ['<b>Lyon,</b><br> La cité des Gones', 45.7579341,4.7650806, 2, "http://www.fourviere.org/wp-content/uploads/2014/10/favicon-11.ico"],
  ['<b>Marseille,</b><br> La cité des Minos', 43.2803051,5.2404104, 3, "https://www.nouvellecaledonie.travel/sites/default/files/2016-09/nature_0.png"]
];
var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 5,
	center: new google.maps.LatLng(43.2803051,5.2404104),
	mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
	marker = new google.maps.Marker({
		position: new google.maps.LatLng(locations[i][1], locations[i][2]),
		icon: locations[i][4],
		map: map
	});
	google.maps.event.addListener(marker, 'click', (function (marker, i) {
		return function () {
			infowindow.setContent(locations[i][0]);
			infowindow.open(map, marker);
		}
	})(marker, i));
}

démo : https://codepen.io/headmax/pen/ZaRprX

[loribac]

Une boucle je n 'avais pas pensé à cela . Un grand merci à toi