logo

 

 

Integration de la carte Google Maps sur un site web

Integration de la carte Google Maps sur un site web-panel consulting

Sur votre site internet, vous avez certainement une page contact sur laquelle vous précisez vos coordonnées voire proposez un formulaire de contact, mais vous aimeriez peut-être mettre un plan d’accès pour que vos clients puisse venir directement chez-vous (bureau, magasin…). Pour cela il est possible d’intégrer simplement une carte interactive grâce à Google Maps. Grâce à ce tutoriel, vous saurez le faire en quelques minutes !

  • Les prérequis pour intégrer une Google Maps sur son site web

    Pour suivre ce didacticiel il vous faut :

  • un navigateur internet pour utiliser le service cartographique de Google
  • un éditeur de code HTML: logiciel ou CMS (WordPress)
  • et c’est tout ????
 

1 – Générer la carte Google Maps

Génération du code HTML d’une carte Google Maps

Saisie et recherche de l’adresse dans Google Maps

Dans un premier temps, il vous faut ouvrir votre navigateur et vous rendre sur Google Maps à l’adresse https://maps.google.fr/ puis :

  • Saisissez votre adresse complète dans le champ de recherche. Google recherche au fur et à mesure de la saisie ; il est d’ailleurs très fort pour ça ! Pour l’exemple j’ai saisi l’adresse de mon appartement quand j’étais étudiant ????
  • Une fois que vous trouvez votre adresse dans les suggestions, cliquez dessus: cela va directement lancer la recherche, c’est-à-dire afficher la carte à l’adresse demandée en y positionnant un marqueur.
  • Ensuite, cliquez sur l’icône en forme de roue crantée placée en bas en droite de la carte proche des boutons de navigation, puis cliquez sur « Partager ou intégrer la carte» :
  • Une fenêtre en superposition de la carte apparait, cliquez alors sur le libellé « Intégrer la carte »
  • Votre carte s’affiche en aperçu. Il vous est alors possible de choisir la taille souhaitée dans la page de votre site internet : petite, moyenne, grande ou une taille personnalisée ; sa taille est directement redimensionnée en fonction de votre sélection.

2 – Intégrer le code HTML pour mettre en  place la carte Google Maps

 

Insertion du code HTML Google Maps dans l’éditeur WordPress

Maintenant, il ne vous reste plus qu’à mettre la ligne de code HTML générée par Google Maps dans la page sur laquelle vous souhaitée mettre votre carte fraichement générée :

  • Toujours dans la fenêtre d’aperçu de votre carte, copiez le code HTML commençant par «
  • Parcourez le code HTML de votre page web jusqu’à l’endroit où vous placerez la carte ; si vous êtes sur WordPress, vous devrez passer l’éditeur « texte » (plutôt que « visuel ») de votre article ou page.
  • Collez la portion de code HTML
  • Enregistrez votre fichier pour sauvegarder les modifications
 
 

Commentaires

Autres Publications

  1. DEVKIDS CODAGE TOURS 2021

  2. APPLICATION DE GESTION POUR COMPLEXE HOTELIER ET RESIDENCE PRIVEE

  3. Bonne nouvelle à Anyama

  4. 10 ans d'existence

  5. DEVKIDS TOURS 2019, Etape Saint Marc Akeikoi

  6. DEVKIDS TOURS 2019, Etape Sainte Marie PK 18

  7. DEVKIDS TOURS 2019, Etape Saint Francois Xavier

  8. Formation des Tontons Encadreurs.

  9. DEVKIDS TOURS 2019, Etape Saint Charles Lwanga d'Adjamé

  10. Devkids Tours 2019,Etape Immaculée Conception d'Abobo

  11. Devenez Tonton Formateur DEVKIDS

  12. Devenez Intermédiaire Et Gagnez de l’Argent avec Nous

  13. DEVKIDS TOURS 2019, Et c'est reparti !!

  14. DEVKIDS TOURS 2019, ATELIER VACANCES 2019

  15. FORMATION DEVKIDS-CODAGE -INVENTER & PROGRAMMER

  16. Les métiers du digital à connaître

  17. Construire une regex complète

  18. Comment améliorer la visibilité de son site web

  19. SEO et réseaux sociaux : Savoir diversifier et équilibrer son trafic

  20. Community management

  21. 5 Bonnes raisons pour votre business d’avoir un site internet en 2019

  22. Integration de la carte Google Maps sur un site web

  23. des blocs Scratch convertis en code Arduino

  24. SYSTEMES DE MESURES : CAPTEURS OPTIQUE ET ÉLECTRONIQUE

  25. Dart 2.0 : le langage de programmation de Google sort officiellement en version stable

  26. Utiliser la base de données Android SQLite

  27. DEVKIDS-PROGRAMMATION

  28. Comment cacher une application sur son téléphone Android ?

  29. Comment créer des contenus en affinité avec son public

  30. Micro-swimmer Robot, le robot qui circule dans les veines

  31. Lollipop est désormais la version d\'Android la plus installée dans le monde

  32. ANDROID - Système d\'exploitation

S'ABONNER A NOTRE NEWSLETTER

 

 


 

 

 

devkids-codage-panel-consulting-devkids_tours_2021.jpg-panel-consulting

 

ACTUALITE EN VIDEOS

Espace d'informations et de formations


miniature
  • Posté le 25-08-2018 à 15:08:32

Devkids-codage présente devkids tours 2018 Etape Abobo

 

Planning chambre- Hôtel -Résidence- Panel Consulting.jpg-panel-consulting

 

CEO

Events devkids-codage

devkids-codage-panel-consulting-devkids_tours_2021.jpg - panel consulting

Nos videos devkids-codage

S5pJDhfJ5UI - panel consulting
Devkids-codage présente devkids tours 2018 Etape Abobo

Photos devkids-codage

Devkids-codage abobo-Saint-Marc-Akeikoi-Panel-Consulting 117-Devkids tours 2019.jpg - panel consulting

 

SAVEZ-VOUS QUE ?

Espace d'informations et de formations


devkids-codage-panel-consulting-devkids_tours_2021.jpg - panel consulting
  • Posté le 03-06-2021 à 20:06:27

DEVKIDS CODAGE TOURS 2021

 

NOS PARTENAIRES

logo College ATLAS Anyama.jpg
logo ariel service.png
logoYD.png
YES CHALLENGE.jpg