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 :
- ne nécessite pas de clé API Google,
- 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.
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 à :
- L'iPhone veuillez consulter La documentation Apple pour les développeurs
- Android veuillez consulter La documentation Android
<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 le titre indiqué dans l'exemple :
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 /> pointant vers l'URL du fichier JavaScript à charger, afin de pouvoir utiliser l'API Google Maps Version 3.
Le paramètre sensor est obligatoire. Il doit être égal à :
- true : si votre application utilise un capteur GPS pour géolocaliser votre visiteur (exemple : téléphone mobile avec capteur GPS intégré),
- false : dans le cas contraire (exemple : ordinateur de bureau).
Rappel : la version 3 ne nécessite pas de clé API Google.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Création du script pour construire la carte Google
Création d'un nouveau script JavaScript.
<script type="text/javascript"> ... </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 type="text/javascript">
function initialisation(){
...
}
</script>
Centrer la carte
On créé centreCarte désignant un point précis ayant pour coordonnées GPS :
- latitude : 47.389982,
- longitude : 0.688877.
centreCarte sera utilisé ultérieurement, afin de centrer la carte sur ce point.
<script type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); ... } </script>
Options de la carte
Création d'options nommées optionsCarte, sous la forme d'un objet littéral, destinées à fixer les paramètres nécessaires à la construction de notre carte.
Chaque option s'écrit ainsi :
nom_de_la_propriété: valeur
<script type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { ... } ... } </script>
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 type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); 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 :
center: centreCarte,
La carte sera donc centrée sur le point centreCarte précédemment calculé.
<script type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { zoom: 8, center: centreCarte ... } ... } </script>
Propriété mapTypeId
La propriété mapTypeId permet de fixer le type de carte à afficher initialement.
Ici, on sélectionne le type Plan :
mapTypeId:google.maps.mapTypeId.ROADMAP
Les valeurs possibles sont :
- google.maps.mapTypeId.ROADMAP : Plan,
- google.maps.mapTypeId.SATELLITE : Satellite,
- google.maps.mapTypeId.HYBRID : Mixte,
- google.maps.mapTypeId.TERRAIN : Relief.
Attention : la dernière option ne doit pas être suivie d'une virgule en fin de ligne.
Contrairement à l'API Google Maps Version 2, il n'y a pas de type de carte par défaut dans l'API Google Maps Version 3.
Initialement, vous devez indiquer impérativement un type de carte afin voir les tuiles correspondantes s'afficher.
<script type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { zoom: 8, center: centreCarte, mapTypeId: google.maps.MapTypeId.ROADMAP } ... } </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 type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { zoom: 8, center: centreCarte, mapTypeId: google.maps.MapTypeId.ROADMAP } var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), 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 (initialisation) à exécuter une fois que tous les éléments de la page sont chargés (équivalent de window.load).
Procéder ainsi, permet d'éviter des comportements imprévisibles et nous donne plus de contrôle sur comment et quand afficher la carte.
<script type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { zoom: 8, center: centreCarte, mapTypeId: google.maps.MapTypeId.ROADMAP } var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte); } google.maps.event.addDomListener(window, 'load', initialisation) </script>
Balise div contenant la carte
On insère entre les balises <body/> une balise <div/> indiquant l'emplacement où la carte doit venir s'afficher.
Celle-ci a pour :
- identifiant : id="EmplacementDeMaCarte",
Ses propriétés CSS sont fixées ci-dessous.
<div id="EmplacementDeMaCarte"></div>
CSS
On définit les propriétés CSS pour que la carte s'affiche en pleine page.
<style type="text/css">
html {
height: 100%
}
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 final pour construire une carte Google
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 type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #EmplacementDeMaCarte { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialisation(){ var centreCarte = new google.maps.LatLng(47.389982, 0.688877); var optionsCarte = { zoom: 8, center: centreCarte, mapTypeId: google.maps.MapTypeId.ROADMAP } 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>