mercredi 03 mai 2017 20:08

API Google Static Maps version 2 exemples et tutoriels en Français

Cartographie et webmapping

Vous n'avez aucune connaissance en JavaScript ? Alors l'API Google Static Maps est faite pour vous !

Celle-ci vous permet d'afficher une carte Google Maps, sous la forme d'une image statique, dans votre page Web. Ce type de carte peut être utilisé sur un site web classique ou destiné aux mobiles. Vous pouvez également y intégrer des marqueurs classiques ou personnalisés, des polylines et des polygones.

La carte statique est construite à l'aide d'une URL dont les paramètres (&nom=valeur) définissent toutes les caractéristiques de la carte finale. Cette URL est ensuite placée dans une balise <img />.

Format type de l'URL :

https://maps.googleapis.com/maps/api/staticmap?parametres_de_la_carte&key={API key}

Insertion de l'URL dans la balise <img /> :

<img src="https://maps.googleapis.com/maps/api/staticmap?parametres_de_la_carte&key={API key}" alt="Carte statique réalisée avec Google Static Maps API" />

Le paramètre key est  obligatoire  et doit être suivi d'une clé API Google. Celle-ci s'obtient via la Console Google Cloud Plateform ( anciennement console API Google ).

key={API key}

Exemple de code pour afficher une carte statique Google :

  • centrée sur la ville de Tours,
  • dotée d'un niveau de zoom égal à 12,
  • mesurant 640 pixels de large par 300 pixels de haut,
  • de type roadmap,
  • affichant un marqueur bleu, caractérisé par la lettre "S" et ayant pour latitude: 47.39734 et longitude: 0.687933,
  • affichant un marqueur vert, caractérisé par la lettre "G" et ayant pour latitude: 47.3971 et longitude: 0.693684,
  • affichant un marqueur rouge, caractérisé par la lettre "C" et ayant pour latitude: 47.389576 et longitude: 0.651197,
  • ayant pour clé: AIzaSyAaKUurUJiOuGEPz1K4avC_okdKF-rqN4U.

<img src="https://maps.googleapis.com/maps/api/staticmap?
					center=Tours,FR
					&zoom=12
					&size=640x300
					&maptype=roadmap
					&markers=color:blue|label:S|47.39734,0.687933
					&markers=color:green|label:G|47.3971,0.693684
					&markers=color:red|color:red|label:C|47.389576,0.651197
					&key=AIzaSyAaKUurUJiOuGEPz1K4avC_okdKF-rqN4U"
					alt="Carte réalisée avec Google Static Maps API" />
Carte réalisée avec Google Static Maps API

Dans les tutoriels ci-dessous nous allons détailler chacun des paramètres nécessaires à la construction d'une carte statique à l'aide de l'API Google Static Maps.

Auparavant, l'API Google Static Maps exigeait l'insertion du paramètre sensor pour savoir si votre application utilisait un capteur afin de déterminer la position géographique de l'utilisateur. Désormais, ce paramètre n'est plus obligatoire.

key : paramètre d'URL pour insérer une clé API Google

09 Décembre 2013

Le paramètre key permet de définir la clé API Google pour une carte statique créée via l'API Google Static Maps.

La clé API Google est délivrée via la Console Cloud Google ( anciennement console API Google ).

center : paramètre d'URL pour centrer une carte statique

08 Décembre 2013

Le paramètre center permet de définir le centre d'une carte statique créée via l'API Google Static Maps

center peut prendre pour valeur soit une adresse postale, soit des coordonnées GPS : Latitude, Longitude.

Positionnement implicite d'une carte en fonction des éléments à afficher

08 Décembre 2013

Lorsque les paramètres marker, path ou visible sont utilisés pour l'affichage d'une carte statique il n'est pas nécessaire de définir les paramètres center et zoom.

Dans ce cas, Google déterminera automatiquement le centre et le niveau de zoom pour optimiser l'affichage des différents éléments sur la carte statique. On parle alors de positionnement implicite.