Maps - Google Maps - Gestion des markers

Ajout d'un marker personnalisé sur une carte
Sources :

Nous reprenons le code du tutoriel précédent (la localisation n'est plus la même), mais cette fois-ci la carte est directement affiché dans un DIV de la page.

Le code nécessaire pour l'affichage de la carte et du marker est le suivant (à la condition préalable qu'il exist un DIV dont l'id est marker définit dans la page). 

var options = {
	center: new google.maps.LatLng(48.1, -4.21),
	zoom: 14,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
		
var map = new google.maps.Map(document.getElementById("marker"), options);

var marker = new google.maps.Marker({
	position: new google.maps.LatLng(48.0977, -4.212),
	map: map,
	title: "Locronan - Rue du Prieuré"
});
Un markeur se définit par l'instantiation de l'objet google.maps.Marker auquel on fournit les paramètres minimaux suivant :
  • position : la position du marker toujours avec l'objet google.maps.LatLng
  • map: la map sur laquelle on veut placer notre marker
  • title: le texte du marker qui apparaît quand on le survole

Modification de l'icone du marker

Pour modifier l'icone du marker, il suffit de lui préciser un paramètre supplémentaire lors de sa construction avec l'objet google.maps.MarkerImage. 

var marker = new google.maps.Marker({
	position: new google.maps.LatLng(48.0977, -4.212),
	map: map,
	title: "Locronan - Rue du Prieuré",
	icon: new google.maps.MarkerImage('/tutorials/maps/google-marker/icon.png')
});

Ajout d'une fenêtre d'information

Maintenant, nous allons ajouter une fenêtre d'information qui apparaitra lorsque l'on clique sur le marker. Le code suivant, ajouté après la création du marker, permet cet affichage. 

var infoWindowOptions = {
	content: '<h3>Locronan</h3>'
		+ '<a href="http://www.locronan-tourisme.com/" target="_blank">Site de l office de tourisme de la ville</a>'
		+ '<br/><img src="google-marker/image.jpg" width="200px" />'
};

var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

google.maps.event.addListener(marker, 'click', function() {
	infoWindow.open(map, marker);
});

Dans ce code, nous commençant par définir le contenu de notre fenêtre. Cela peut être du texte mais ici nous avons choisi de mettre de l'HTML et même une image. En réalité, tout ce que vous pouvez réalisez en HTML, vous pourrez le placer dans une telle fenêtre. L'objet google.maps.InfoWindow permet d'encapsuler ce contenu pour l'API de Google. La dernière partie du code, via la fonction google.maps.event.addListener, ajoute un évenement de type click de souris sur notre marker qui engendre l'ouverture de la fenêtre (sur la carte via l'argument map et à la position de notre marker via l'argument marker).

Il existe quelques options sur les markers que nous ne présentons pas ici.
  • La possibilité d'animer un marker pour par exemple le faire chuter du haut de la carte ou encore pour le faire sautiller
  • La possibilité de le rendre draggable afin de laisser l'utilisateur le placer là ou il le souhaite

Pour en savoir plus sur ces options, vous pouvez jeter un oeil à cette adresse : Markers (en anglais)

Code complet

Voici le code complet qui vous permettra de tester cet exemple dans une page HTML. Notez que les URLs d'accès aux images sont différentes et que le style appliqué à la fenêtre ne possède pas toute la définition présente par défaut sur notre site. 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
	</head>

	<body>
		<div id="map" style="width:100%; height:100%"></div>
	</body>
</html>
<script type="text/javascript">
	var options = {
		center: new google.maps.LatLng(48.1, -4.21),
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
		
	var map = new google.maps.Map(document.getElementById("map"), options);
	
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(48.0977, -4.212),
		map: map,
		title: "Locronan - Rue du Prieuré",
		icon: new google.maps.MarkerImage('/tutorials/maps/google-marker/icon.png')
	});
	
	var infoWindowOptions = {
		content: '<h3>Locronan</h3>'
			+ '<a href="http://www.locronan-tourisme.com/" target="_blank">Site de l office de tourisme de la ville</a>'
			+ '<br/><img src="image.jpg" width="200px" />'
	};

	var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.open(map, marker);
	});
</script>

COMMENTAIRES

Cat

Bonjour,

J'utilise une API FileLayer HTML5 leaflet pour charger directement un fichier GPX pouvant contenir trace et waypoint.

Pour chaque marker, outre les coordonnées GPS, j'aimerai afficher en popup l'information présente en balise <name> du Waypoint.

Dans la console j'accède à cette information visible en objet data mais comment la capturer en variable Texte pour l'ajouter en informtion dans le popup ?

Routine de code javascript :

L.Control.FileLayerLoad.LABEL = '<img class="MyFolder" src="leaflet/images/folder.svg" alt="file icon"/>';
control = L.Control.fileLayerLoad({
fitBounds: true,
layerOptions: {
style: style,
pointToLayer: function (data, latlng) {

// *********************************************
console.log(data);
// console.log("name:" + feature.properties.name);
// *********************************************

ItemPopup = "" + latlng.lat.toFixed(5) + "," + latlng.lng.toFixed(5) "
" + MyUrl + "Maps
";
// Icône à afficher
return L.marker(latlng, { icon: IconWpt }).bindPopup(ItemPopup).on('contextmenu', function (e) {
});
}
}
}).addTo(map);

Console :

https://uploads.disquscdn.c...

Style de fichier GPX :


<gpx version="1.1" creator="GpxTraceNet7.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/1" xsi:schemalocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<metadata>
<bounds minlat="43.386290" minlon="-1.714930" maxlat="46.320180" maxlon="6.716000"/>
</metadata>
<wpt lat="43.386290" lon="-1.714930"><name>[I4] 64 Très belle Vue sur la corniche (Ciboure)</name></wpt>
<wpt lat="45.792290" lon="6.716000"><name>[I3] 74 Notre Dame de la Gorge (Contamines)</name><desc>[I3] 74 Notre Dame de la Gorge (Contamines)</desc></wpt>
<wpt lat="46.320180" lon="6.624990"><name>[I4] 74 Belvedere de Tréchauffé</name></wpt>
<wpt lat="45.872660" lon="6.464010"><name>[I4] 74 Col des Aravis</name></wpt>
<wpt lat="45.900860" lon="6.288000"><name>[I3] 74 Grotte ND de Lourde (La Balme-de-Thuy)</name></wpt>
</gpx>

Nul doute qu'il existe un codage mais il dépasse mes connaissances et google n'est pas mon ami sur ce coup !

Merci par avance d'une solution éventuelle

Cat

EDIT - Question solutionnée :

Problème résolu j'étais aveuglé par le type: feature présent dans la console, ... alors que c'est le mot data qui figure en pointToLayer dans le codage existant !

De fait, le code à ajouter pour récupérer le contenu texte de la balise <name> dans Wpt_Name est :

Wpt_Name = String(data.properties.name);
// *********************************************
// console.log(data);
console.log(Wpt_Name);
// *********************************************

Routine correcte (reste à ajouter cette variable dans le popup) :

L.Control.FileLayerLoad.LABEL = '<img class="MyFolder" src="leaflet/images/folder.svg" alt="file icon"/>';
control = L.Control.fileLayerLoad({
fitBounds: true,
layerOptions: {
style: style,
pointToLayer: function (data, latlng) {
Wpt_Name = String(data.properties.name);
// *********************************************
// console.log(data);
console.log(Wpt_Name);
// *********************************************


ItemPopup = "" + latlng.lat.toFixed(5) + "," + latlng.lng.toFixed(5) + "
" + Wpt_Name + "
" + MyUrl + "Maps
";
// Icône à afficher
return L.marker(latlng, { icon: IconWpt }).bindPopup(ItemPopup).on('contextmenu', function (e) {
});
}
}
}).addTo(map);

ericfrigot

Bonjour, content que vous ayez trouvé la solution et je peux vous dire que ça m'ait arriver plusieurs fois d'avoir exactement le même soucis en lisant d'autres tutoriels. Bonne continuation. Eric

Brolysan

merci pour ce tutoriel ;) bien expliqué. Merci