Google Maps API - Gestion des markers

Ajout d'un marker, personnalisation de l'icone et ajout d'une fenêtre d'information

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 :

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('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="maps/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.

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('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>

A suivre : Groupement de markers Voir le tutoriel

comments powered by Disqus