Api Google Maps - Trucs-et-astuces - Personnalisez et intégrez votre carte dans votre site ou blog sans une ligne de code

CRÉER ET INTÉGRER SA CARTE DANS UN SITE OU UN BLOG SANS UNE LIGNE DE CODE

Attention :

L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.

TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.

L'API Google Maps Javascript Version 3 est désormais la version officielle.

Article créé le : 23/10/2008

Présentation

Il est désormais possible d'ajouter une carte Google Maps sur un Blog ou un Site internet simplement en copiant et collant un morceau de code HTML (iframe) généré automatiquement par Google.

Grâce à ce système :

Aucune notion de programmation est nécessaire,
Inutile de s'inscrire pour obtenir une clé API Google Maps.

Pour cela, il vous suffit de suivre les trois étapes suivantes :

Primo :

Rendez-vous sur le site de Google Maps : http://maps.google.fr,
Connectez-vous à votre compte Google,
Cliquez sur l'onglet "Mes Cartes", et créez votre carte personnelle. Guide : Comment personnaliser les cartes Google Maps.

Secundo :

Une fois votre carte terminée :

cliquez sur le lien "lien" [ 1 ] situé en haut à droite de la page,
Une fenêtre bleutée s'ouvre. Copiez le code situé dans le champ nommé "Collez le code HTML pour l'intégrer sur un site Web" [ 2 ],
Cliquez sur le lien "Personnaliser et prévisualiser la carte intégrée" [ 3 ] si vous souhaitez modifier certains paramètres de cette carte.

Personnalisez et intégrez votre carte dans votre site ou blog sans une ligne de code

Exemple :


<iframe width="728" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.fr/maps/ms?ie=UTF8&amp;hl=fr&amp;s=AARTsJoVX-LzGDB438W27Ca6glQ7xbBA_A&amp;msa=0&amp;msid=115115239782170342035.00045c5d8b68ccf0d0247&amp;ll=48.162879,0.101624&amp;spn=0.080151,0.249939&amp;z=12&amp;output=embed"></iframe>

<br />

<small><a href="http://maps.google.fr/maps/ms?ie=UTF8&amp;hl=fr&amp;msa=0&amp;msid=115115239782170342035.00045c5d8b68ccf0d0247&amp;ll=48.162879,0.101624&amp;spn=0.080151,0.249939&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>

Tertio :

Collez le fragment de code précédent dans la page votre blog ou site internet
Et voilà c'est tout !

Désormais, la carte que vous avez créée dans l'onglet "Mes Cartes" de Google Maps va s'afficher à l'identique (marqueurs, info-bulles, surfaces, lignes) dans la page votre blog ou site internet.

Par la suite, toute modification que vous effectuerez sur votre carte dans l'onglet "Mes Cartes" de Google Maps se répercutera immédiatement dans votre site web ou blog.