Tutoriel créer une carte personnalisée avec google maps

114,937 views

Published on

Tutoriel sur la création de cartes personnalisées avec Google Maps.

3 Comments
18 Likes
Statistics
Notes
  • J'ai créé une carte via MapAList qui permet de charger un tableau excel directement dans googlemaps. Mais je voudrai aller un cran plus loin avec des cases à cocher qui rajoute/retire des points sur la carte.
    Quelqu'un a-t-il déjà fait cela facilement ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • J'ai été un cran plus loin avec MapAList qui permet de charger une carte via un tableau 'excel' et de l'importer dans googlemaps.
    Mais je voudrai aller encore plus loin, càd pouvoir générer des cases à cocher qui permettent de rajouter/retirer des points sur la carte.
    Quelqu'un a-t-il déjà pu le réaliser facilement ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Très bon slide
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
114,937
On SlideShare
0
From Embeds
0
Number of Embeds
5,910
Actions
Shares
0
Downloads
16
Comments
3
Likes
18
Embeds 0
No embeds

No notes for slide

Tutoriel créer une carte personnalisée avec google maps

  1. 1. Créer une carte personnalisée avec Google Maps TUTORIEL Le SAV du club Affaires courantes © Nicolas Monseigne
  2. 2. Créer une carte Google Maps Le prérequis : il vous faut un compte Google ! TUTORIEL Le SAV du club Affaires courantes Connectez-vous sur : http://maps.google.com Puis connectez-vous avec votre compte Google © Nicolas Monseigne
  3. 3. TUTORIEL Le SAV du club Affaires courantes Ceci fait, cliquez sur "Mes Cartes", puis "Créer une nouvelle carte" Créer une carte Google Maps © Nicolas Monseigne
  4. 4. TUTORIEL Le SAV du club Affaires courantes Nommez votre carte, caractérisez-la (ça fait toujours des mots clés ou des liens ;-) Créer une carte Google Maps © Nicolas Monseigne
  5. 5. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps 3 outils : - la main sert à déplacer la carte - la "bulle" sert à positionner un point - la "ligne" sert à positionner un tracé La manipulation : cliquer sur le bouton, puis cliquer sur la carte pour localiser le point ou le tracé. © Nicolas Monseigne
  6. 6. TUTORIEL Le SAV du club Affaires courantes Localisez votre premier point. Une bulle va s'ouvrir, pour vous demander les informations à donner à l'internaute quand il cliquera sur ce point. Créer une carte Google Maps © Nicolas Monseigne
  7. 7. TUTORIEL Le SAV du club Affaires courantes Une fois votre texte saisi, cliquez sur "OK" Créer une carte Google Maps © Nicolas Monseigne
  8. 8. TUTORIEL Le SAV du club Affaires courantes Vous avez la possibilité de personnaliser la "punaise" qui va localiser votre point. Cliquez ici et choisissez dans le menu celle qui vous convient Créer une carte Google Maps | Allons un peu plus loin © Nicolas Monseigne
  9. 9. TUTORIEL Le SAV du club Affaires courantes Vous pouvez aussi insérer des liens hypertextes (liens cliquables) ou mettre des textes en couleur en passant dans l'interface "Texte enrichi" Créer une carte Google Maps | Allons un peu plus loin © Nicolas Monseigne
  10. 10. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Et si nous ajoutions une photo de notre galerie FlickR !? Connectez-vous sur FlickR (voir précédents tutoriels),choisissez votre photo, et cliquez sur "Partager" © Nicolas Monseigne
  11. 11. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Dans la rubrique "Copier le code HTML"… copiez le code HMTL !!! © Nicolas Monseigne
  12. 12. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Revenez sur votre carte Gmaps, passez dans la rubrique "Modifiez le code HTML". © Nicolas Monseigne
  13. 13. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Collez alors, au tout début, le code que vous avez récupéré sur FlickR. © Nicolas Monseigne
  14. 14. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Vous obtiendrez ce résultat… Un peu grand, donc n'hésitez pas à redimensionner l'image dans le code HTML © Nicolas Monseigne
  15. 15. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Le code que vous avez copié est dans ce genre : <a href=&quot;http://www.flickr.com/photos/medoc-tourisme/4328203384/&quot; title=&quot;L'océan Atlantique, sur la côte Médocaine de medoc-tourisme.com, sur Flickr&quot;><img src=&quot;http://farm5.static.flickr.com/4030/4328203384_99ca187ff4.jpg&quot; width=&quot; 500 &quot; height=&quot; 333 &quot; alt=&quot;L'océan Atlantique, sur la côte Médocaine&quot; /></a> Pour modifier la taille de l'image, vous devez modifier les valeurs en rouge (attention à conserver les proportions !) © Nicolas Monseigne
  16. 16. TUTORIEL Le SAV du club Affaires courantes Créer une carte Google Maps | Allons un peu plus loin Créez autant de points que nécessaire. Puis cliquez sur &quot;Enregistrer&quot;, puis &quot;Terminer&quot;. Votre carte est finie ! © Nicolas Monseigne
  17. 17. TUTORIEL Le SAV du club Affaires courantes Fin du tutoriel © Nicolas Monseigne

×