Comment créer une carte avec l'API Google Maps javascript version 3

Carte Map exemples et tutoriels en Français

API Google Maps JavaScript version 3

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Comment créer une carte Google ?

Nous allons construire notre première carte Google à l'aide de l'API Google Maps Version 3. Les caratéristiques de cette carte sont :

  • centre : la ville de Tours ( Latitude : 47.389982, Longitude : 0.688877 ),
  • niveau de zoom : 8,
  • type de carte : plan.

Cette version de l'API :

  • nécessite une clé API Google (désormais obligatoire),
  • est optimisée pour augmenter sa vitesse de chargement et d'execution,
  • fonctionne aussi bien sur des ordinateurs de bureau que sur des appareils mobiles.

Vous allez voir, étape par étape, comment créer et insérer une carte dans votre page web via l'API Google Maps Version 3. Chaque ligne de code est expliquée de façon détaillée.

Cet exemple constitue le B.A.BA indispensable à toute construction de carte Google.

Remarque :
Lorque l'on crée une carte, il est impératif de paramétrer au minimum :
  • son container ( <div id="EmplacementDeMaCarte"></div> ),
  • son centre center,
  • son niveau de zoom zoom.

Carte Google

Structure d'une page HTML5

Voici la structure d'une page HTML 5 par défaut.

<!DOCTYPE html>
<html lang="fr">
	<head>
	.....
	</head>
	
	<body>
	.....
	</body>
</html>

Balise meta viewport

La balise <meta/> permet de paramétrer le viewport, c'est à dire la zone affichable.
Elle comporte les propriétés suivantes :

  • initial-scale=1.0 : force l'ouverture de la page avec un niveau d'échelle égal à 1,
  • user-scalable=no : l'utilisateur ne peut pas zoomer sur la page.

Les mobiles utilisant ANDROID, à partir de la version 1.5, supportent également cette balise.

Notez que le navigateur Safari, de l'iPhone, exige que cette balise <meta/> soit insérée entre les balises <head></head> de la page.

Pour plus d'informations relatives à :

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

Encodage de la page

On donne des informations complémentaire sur le contenu de la page :

  • les caractères sont encodés au format UTF-8.
<meta charset="UTF-8" />

Titre de la page

On donne un titre à la page.

Pour optimiser le référencement de sa page, on met généralement une phrase comportant des mots clés résumant le contenu de la page.

L'orde de ces mots clés est important : le mot clé le plus important en début de phrase, puis des mots clés dont l'importance baisse au fure et à mesure de la phrase.

Exemple :
Pour un site consacré aux tutoriels, au lieu de mettre comme titre Ma super chouette carte créée avec l'API Google Maps V3, il vaudrait mieux mettre :
Créer une carte API Google Maps Version 3

<title>Créer une carte API Google Maps Version 3</title>

Chargement du script API Google Maps Javascript version 3

Votre page doit, impérativement, contenir une balise <script /> dont le paramètre src pointe vers l'URL de l'API Google Maps Javacript Version 3, afin de pouvoir utiliser cette API.

Désormais dans la version 3 de l'API Google Maps :

  • le paramètre key suivi à la clé API Google Maps est obligatoire,
  • le paramètre sensor n'est plus obligatoire.

<script src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci"></script>

Création du script pour construire la carte Google

Création d'un nouveau script JavaScript.

<script>
...
</script>

Fonction initialisation

On créé une nouvelle fonction nommée initialisation().

Celle-ci va contenir le code nécessaire à la construction de notre carte.

<script>
	function initialisation(){
		...
	}
</script>

Options de la carte

Création d'un objet littéral nommé optionsCarte, destiné à fixer les paramètres nécessaires à la construction de notre carte.

<script>
	function initialisation(){
		var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
		var optionsCarte = {
			...
		}
		...
	}
</script>

Chaque propriété contenue dans un objet littéral s'écrit ainsi :

nom_de_la_propriété: valeur_de_la_propriété

Les propriétés contenue dans un objet littéral sont séparées les unes des autres par une virgule :

var ojbetLitteral = {
	nom_de_la_propriété_1: valeur_de_la_propriété_1,
	nom_de_la_propriété_2: valeur_de_la_propriété_2,
	nom_de_la_propriété_3: valeur_de_la_propriété_3
}

Vous pouvez retrouver l'ensemble des propriétés pouvant s'appliquer à une carte en consultant MapOptions.

Propriété zoom

La propriété zoom permet de fixer le niveau de zoom avec lequel la carte doit s'afficher.

Le niveau de zoom sélectionné ici est égal à 8.

zoom: 8
<script>
	function initialisation(){
		var optionsCarte = {
			zoom: 8
			...
		}
		...
	}
</script>

Propriété center

La propriété center permet de déterminer le point sur lequel la carte doit être centrée.

Dans cet exemple on souhaite centrer la carte sur le point ayant pour latitude : 47.389982 et longitude : 0.688877.

Pour cela, il suffit d'utiliser la classe LatLng :

<script>
	function initialisation(){
		var optionsCarte = {
			zoom: 8,
			center: new google.maps.LatLng(47.389982, 0.688877)
		}
	...
	}
</script>

ou un objet LatLngLiteral :

<script>
	function initialisation(){
		var optionsCarte = {
			zoom: 8,
			center: {lat: 47.389982, lng: 0.688877}
		}
	...
	}
</script>

Création de la carte

Création d'une nouvelle carte nommée maCarte.

Celle-ci s'affichera à l'intérieur de la balise <div /> ayant pour identifiant id="EmplacementDeMaCarte".

De plus, on lui applique les options fixées dans optionsCarte.

<script>
	function initialisation(){
		var optionsCarte = {
			zoom: 8,
			center: new google.maps.LatLng(47.389982, 0.688877)
			// Remarque : Il est désormais possible de remplacer :
			// center: new google.maps.LatLng(47.389982, 0.688877)
			// par :
			// center: {lat: 47.389982, lng: 0.688877}
		}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
	}
</script>

Autre écritures équivalentes :

  • Intégrer les options directement lors de la création de la carte
    <script>
    	function initialisation(){
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), {
    			zoom: 8,
    			center: new google.maps.LatLng( 47.389982, 0.688877 )
    			// Remarque : Il est désormais possible de remplacer :
    			// center: new google.maps.LatLng(47.389982, 0.688877)
    			// par :
    			// center: {lat: 47.389982, lng: 0.688877}
    		});
    	}
    </script>
    
  • Utiliser la méthode setOptions de la classe Map
    <script>
    	function initialisation(){
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
    		maCarte.setOptions({
    			zoom: 8,
    			center: new google.maps.LatLng( 47.389982, 0.688877 )
    			// Remarque : Il est désormais possible de remplacer :
    			// center: new google.maps.LatLng(47.389982, 0.688877)
    			// par :
    			// center: {lat: 47.389982, lng: 0.688877}
    		});
    	}
    </script>
    
    ou encore
    <script>
    	function initialisation(){
    		var optionsCarte = {
    			zoom: 8,
    			center: new google.maps.LatLng(47.389982, 0.688877)
    			// Remarque : Il est désormais possible de remplacer :
    			// center: new google.maps.LatLng(47.389982, 0.688877)
    			// par :
    			// center: {lat: 47.389982, lng: 0.688877}
    		}
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
    		maCarte.setOptions(optionsCarte);
    	}
    </script>
    
  • Utiliser les méthodes setCenter et setZoom de la classe Map
    <script>
    	function initialisation(){
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
    		maCarte.setCenter( new google.maps.LatLng(47.389982, 0.688877) );
    		// Remarque : Il est désormais possible de remplacer :
    		// maCarte.setCenter( new google.maps.LatLng(47.389982, 0.688877) );
    		// par :
    		// maCarte.setCenter( {lat: 47.389982, lng: 0.688877} );
    		maCarte.setZoom( 8 );
    	}
    </script>
    
  • Utiliser la méthode set de la classe MVCObject (la classe Map héritant de la classe MVCObject)
    <script>
    	function initialisation(){
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
    		maCarte.set("center", new google.maps.LatLng( 47.389982, 0.688877 ));
    		// Remarque : Il est IMPOSSIBLE de remplacer :
    		// maCarte.set("center", new google.maps.LatLng( 47.389982, 0.688877 ));
    		// par :
    		// maCarte.set("center", {lat: 47.389982, lng: 0.688877} );
    		maCarte.set("zoom", 8);
    	}
    </script>
    
  • Utiliser la méthode setValues de la classe MVCObject (la classe Map héritant de la classe MVCObject)
    <script>
    	function initialisation(){
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
    		maCarte.setValues({
    			"center": new google.maps.LatLng( 47.389982, 0.688877 ),
    			// Remarque : Il est possible de remplacer :
    			// "center": new google.maps.LatLng( 47.389982, 0.688877 ),
    			// par :
    			// "center": {lat: 47.389982, lng: 0.688877},
    			"zoom": 8
    		});
    	}
    </script>
    
    ou encore :
    <script>
    	function initialisation(){
    		var optionsCarte = {
    			zoom: 8,
    			center: new google.maps.LatLng( 47.389982, 0.688877 )
    			// Remarque : Il est désormais possible de remplacer :
    			// center: new google.maps.LatLng( 47.389982, 0.688877 )
    			// par :
    			// center: {lat: 47.389982, lng: 0.688877}
    		};
    		var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
    		maCarte.setValues( optionsCarte );
    	}
    </script>
    

Evénement load

Pour s'assurer que la carte sera placée dans la page web une fois que le chargement complet de celle-ci sera effectué, nous allons utiliser addDomListener.

google.maps.event.addDomListener(window, 'load', initialisation);

Permet de définir la fonction nommée initialisation ( en ommetant de mettre () après initialisation ) à exécuter une fois que tous les éléments de la page seront chargés ( équivalent de window.load ).

<script>
	function initialisation(){
		var optionsCarte = {
			zoom: 8,
			center: new google.maps.LatLng(47.389982, 0.688877)
		}
		var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
	}
	google.maps.event.addDomListener(window, 'load', initialisation);
</script>

Balise div contenant la carte Google Maps

On insère entre les balises <body> une balise <div/> indiquant l'emplacement dans notre page web où la carte doit venir s'afficher.

Celle balise <div/> a pour identifiant id="EmplacementDeMaCarte"

<div id="EmplacementDeMaCarte"></div>

CSS

On définit les propriétés CSS pour que la carte s'affiche en pleine page.

<style>
	html, body {
		height: 100%;
		margin: 0;
		padding: 0
	}
	#EmplacementDeMaCarte {
		height: 100%
	}
</style>

Message signalant que Javascript n'est pas activé dans le navigateur

Enfin, on ajoute, entre les balises <noscript> un message indiquant à l'utilisateur que Javascript est probablement désactivé ou qu'il n'est pas supporté par son navigateur.

Aussi, s'il souhaite visualiser votre carte, il lui sera nécessaire d'activer Javascript sur son navigateur ou de changer de navigateur.

<noscript>
	<p>Attention : </p>
	<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
	<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
	<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>

Code pour construire sa première carte avec l'API Google Maps V3

Au final, vous venez de créer le code nécessaire à la construction de votre première carte via l'API Google Maps JavaScript version 3 :

  • centrée sur : la ville de Tours,
  • niveau de zoom : 8,
  • type de carte : plan.
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci"></script>
		<script>
			function initialisation(){
				var optionsCarte = {
					zoom: 8,
					center: new google.maps.LatLng(47.389982, 0.688877)
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

Une autre méthode, consiste à positionner l'appel au script de l'API Google Maps et le code javascript créant la carte juste avant la balise </body>.

On peut ainsi profiter pleinement des avantages des attributs async et defer de la balise <script>.

Le paramètre callback, placé dans l'URL du script appelant l'API GOOGLE MAPS, permet d'exécuter la fonction initialisation() une fois les scripts chargés :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
		<script>
			function initialisation(){
				var optionsCarte = {
					zoom: 8,
					center: new google.maps.LatLng(47.389982, 0.688877)
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>