Ajouter une carte Google sur son site

Pour situer un service sur un site Web ou un blog, on peut intéger une carte Google dans la page et éventuellement ajouter une indication sur celle-ci.

1) Localisation

On accède au site Google Map, qui présente une carte comme sur l'image à droite. On se déplace avec la souris: presser le bouton et déplacer la main pour voyager, bouger le bouton pour zoomer ou reculer.

Plusieurs modes d'affichages sont possibles: carte ou relief pour le monde entier, tandis que la vue street ne concerne que quelques villes des Etats-Unis. Il faut essayer cependant ce mode cependant, c'est fabuleux d'avoir vue sur les rues d'une ville quelconque en quelques secondes.

On sélectionne donc un endroit précis sur la carte, celui où se situe le service ou la boutique que l'on veut y placer. Dans notre exemple, on le situe à Paris sur les Champs Elysées.

2) Obtenir le code

Une fois la zone définie avec l'agrandissement maximal possible, on clique sur "Obtenir l"URL". Une boite de dialogue affiche deux champs. Dans le second se trouve un code HTML et en bas le text: "personnaliser et prévisualisez la carte intégrée.
Cliquer sur ce lien pour afficher un panneau de configuration.
Puis on peut récupérer code en le sélectionnant avec la souris et les touches et CTRL+V.

<iframe 
    width="320" 
    height="240" 
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="https://maps.google.fr/?ie=UTF8&ll=48.867284,2.315369
&spn=0.003098,0.006942&z=17&om=1&layer=c
&output=embed&s=AARTsJqaq7rV0B9cs4JBrvPKbCnu0GGTnA">
</iframe>
<p><br>
<small><a href="https://maps.google.fr/?ie=UTF8&amp;ll=48.867284,2.315369&amp;spn=0.003098,0.006942&amp;z=17&amp;om=1&amp;layer=c&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir 
    le plan</a>
</small></p>

3) Ajouter une indication

Pour cela, il faut créer un compte sur Google Maps. Vous cliquez sur l'onglet "Mes cartes", et puis sur le bouton "Créer carte".

On peut aussi simplifier en faisant une capture d'écran de la carte et en ajoutant une indication sur l'image avec un logiciel de dessin.

4) Utilisez le code

Le code ainsi récupéré peut être placé n'importe où dans une page Web.

Démonstration:

Agrandir la carte

Un logiciel de capture d'écran permettra de faire une image de la carte (comme l'outil capture de Windows ou MWSnap).
Une bulle peut être est dessinée avec l'outil dessin de LibreOffice ou MS Paint et collée avec The Gimp.

Voir aussi