Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Créer une carte statique Google Maps

Tutoriel publié le et mis à jour le
Tutoriel en Français

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

Celle-ci vous permet d'afficher une carte Google Maps, sous la forme d'une image, dans votre page Web. Aucune clé API Google Maps n'est éxigée. 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, construite à l'aide des paramètres (&nom=valeur) contenus dans l'URL, situés dans l'attribut src= de la balise <img />, peut-être affichée sous différents formats :

  • GIF,
  • PNG,
  • JPEG.

Format type de la balise <img /> :

<img src="http://maps.googleapis.com/maps/api/staticmap?parametres_de_la_carte" title="Carte Google Maps Statique" alt="Carte Google Maps Statique" />
Carte réalisée avec Google Static Maps API Version 2

La carte ci-dessus est obtenue à partir de la ligne de code ci-dessous :

<img src="http://maps.googleapis.com/maps/api/staticmap?center=Tours,FR&zoom=12&size=280x300&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&sensor=false" title="Carte réalisée avec Google Static Maps API Version 2" alt="Carte réalisée avec Google Static Maps API Version 2" />

Dans les lignes qui vont suivre nous allons détailler chacun des paramètres nécessaires à la construction d'une carte statique à l'aide de l'API Google Static Maps Version 2.

Si vous souhaitez adapter rapidement votre carte réalisée avec l'ancienne version de l'API Google Static Maps Version 1 veuillez consulter le guide de mise à jour.

Attention :

Afin de pouvoir utiliser les API de Google, JavaScript doit être activé sur votre navigateur.

Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.

Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis rafraîchissez la page.