Placer un Marker

Nous allons utiliser l'objet Marker de l'API Google Map. Son constructeur prend un seul paramètre, un tableau statique d'options :

  • position définit la position du Marker sur la carte et prend un objet de type LatLng.
  • map définit la carte sur laquelle afficher le Marker et prend donc un objet de type Map.
  • title définit le texte qui sera affiché au survol de la souris et prend une chaîne de caractères classique.
// Coordonnées du cinéma Pathé Bellecour Lyon
var myLatlng = new google.maps.LatLng(45.758796,4.834607);
 
// Carte centrée sur le cinéma, zoom 16
var myMapOptions = {
	zoom: 16,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
 
// Création de la carte
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myMapOptions
	);
 
// Création du Marker
var myMarker = new google.maps.Marker({
	// Coordonnées du cinéma
	position: myLatlng,
	map: myMap,
	title: "Cinéma Pathé Bellecour"
});

Vous pouvez observer le rendu de ce premier exemple.

Personnaliser l'icône du Marker

Nous allons maintenant remplacer l'image classique des Marker Google Map par une image de notre choix. Pour notre exemple, j'ai choisi un logo Pathé de petite taille et sur fond transparent. Bien sûr, n'importe quelle image fonctionne.

Pour cela, nous allons créer un objet de type MarkerImage et lui donner comme paramètre l'URL de l'image que nous souhaitons utiliser comme icône de notre Marker. Il existe d'autre paramètres supplémentaires optionnels qui permettent par exemple de ne prendre qu'une seule partie d'une image, ou encore de définir le point d'encrage de notre image, etc. Je vous invite à consulter la documentation officielle si vous souhaitez utiliser ces fonctionnalités.

// Cinéma Pathé Bellecour
var myLatlng = new google.maps.LatLng(45.758796,4.834607);
 
// Carte centrée sur le cinéma
var myMapOptions = {
	zoom: 16,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
 
// Création de la carte
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myMapOptions
	);
 
// Création de l'icône
var myMarkerImage = new google.maps.MarkerImage('img/pathe.png');
 
// Création du marker
var myMarker = new google.maps.Marker({
	// Coordonnées du cinéma
	position: myLatlng, 
	map: myMap,
	// Nous ajoutons un paramètre supplémentaire
	// icon pour lequel nous donnons le MarkerImage
	// que nous venons de créer.
	icon: myMarkerImage,
	title: "Cinéma Pathé Bellecour"
});

Vous pouvez observer le rendu de ce deuxième exemple.

Ajouter une fenêtre d'information

Pour créer une fenêtre d'information, nous utiliserons l'objet InfoWindow qui prend en paramètre un tableau statique d'options. Plusieurs options sont disponibles mais nous ne verrons ici que l'option content qui permet de définir le contenu de la fenêtre en HTML. Cette objet s'utilise de la façon suivante :

// Options de la fenêtre
var myWindowOptions = {
	content:
	'<h6>Cinéma Pathé Bellecour</h6>'+
	'<p><a href="http://www.cinemasgaumontpathe.com/cinemas/cinema-pathe-lyon-bellecour/" title="Site officiel">Visiter le site officiel</a></p>'
};
 
// Création de la fenêtre
var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);

Bien entendu, cette fenêtre ne s'affichera pas d'elle même. Pour l'afficher, il faut appeler la méthode open de l'objet InfoWindow. Cette méthode prend deux paramètres :

  • map définit la carte sur laquelle afficher la fenêtre et prend donc un objet de type Map.
  • anchor définit l'emplacement où la fenêtre doit être affichée. Il prend un objet de type MVCObject dont beaucoup d'autres dérivent et notamment l'objet Marker.

Nous souhaitons par ailleurs que cette fenêtre ne soit affichée que lorsque nous cliquons sur notre Marker. Pour cela, nous devons utiliser le gestionnaire d'évènement de l'API Google Map. Il s'utilise de la manière suivante :

google.maps.event.addListener( obj, event, handler);

Cette fonction prend donc trois paramètres :

  • obj définit l'objet duquel proviendra l'évènement et prend n'importe quel objet de l'API.
  • event une chaîne de caractère définissant le nom de l'évènement. click par exemple.
  • handler définit la fonction à appeler lorsque l'évènement se produit.

Le script complet est donc le suivant :

// Cinéma Pathé Bellecour
var myLatlng = new google.maps.LatLng(45.758796,4.834607);
 
// Carte centrée sur le cinéma
var myMapOptions = {
	zoom: 16,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
 
// Création de la carte
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myMapOptions
	);
 
// Création de l'icône
var myMarkerImage = new google.maps.MarkerImage('img/pathe.png');
 
// Création du marker
var myMarker = new google.maps.Marker({
	// Coordonnées du cinéma
	position: myLatlng, 
	map: myMap,
	// Nous ajoutons un paramètre supplémentaire
	// icon pour lequel nous donnons le MarkerImage
	// que nous venons de créer.
	icon: myMarkerImage,
	title: "Cinéma Pathé Bellecour"
});
 
// Options de la fenêtre
var myWindowOptions = {
	content:
	'<h6>Cinéma Pathé Bellecour</h6>'+
	'<p><a href="http://www.cinemasgaumontpathe.com/cinemas/cinema-pathe-lyon-bellecour/" title="Site officiel">Visiter le site officiel</a></p>'
};
 
// Création de la fenêtre
var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);
 
// Affichage de la fenêtre au click sur le marker
google.maps.event.addListener(myMarker, 'click', function() {
	myInfoWindow.open(myMap,myMarker);
});

Vous pouvez observer le rendu de ce troisième et dernier exemple.