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="http://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>

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 le plan

Ressources

Un logiciel de capture d'écran permettra de faire une image de la carte (comme l'outil capture de Windows ou MWSnap).

La bulle est dessinée avec l'outil dessin de LibreOffice et collée avec The Gimp.


Utiliser Map Element

Avec Web Elements de Google, ajouter une carte était plus facile. Mais le service a été clôturé. Pourtant le code ci-dessous fonctionne encore (pour l'instant).

Aller dans Map Element. Entrer une localisation, votre adresse pour un site professionnel, et placez le code généré dans votre page. Par exemple avec "Paris":


Voir aussi