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. APPLICATION WEB DE GESTION DE COMPLEXE HÔTELIER ET RESIDENCE PRIVÉE

  2. Site web e-commerce

  3. CREATION DE BOUTIQUE EN LIGNE POUR TON BUSINESS

  4. DEVKIDS CODAGE TOURS 2021

  5. APPLICATION DE GESTION POUR COMPLEXE HOTELIER ET RESIDENCE PRIVEE

  6. Bonne nouvelle à Anyama

  7. 10 ans d'existence

  8. DEVKIDS TOURS 2019, Etape Saint Marc Akeikoi

  9. DEVKIDS TOURS 2019, Etape Sainte Marie PK 18

  10. DEVKIDS TOURS 2019, Etape Saint Francois Xavier

  11. Formation des Tontons Encadreurs.

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

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

  14. Devenez Tonton Formateur DEVKIDS

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

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

  17. DEVKIDS TOURS 2019, ATELIER VACANCES 2019

  18. FORMATION DEVKIDS-CODAGE -INVENTER & PROGRAMMER

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

  20. Construire une regex complète

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

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

  23. Community management

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

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

  26. des blocs Scratch convertis en code Arduino

  27. SYSTEMES DE MESURES : CAPTEURS OPTIQUE ET ÉLECTRONIQUE

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

  29. Utiliser la base de données Android SQLite

  30. DEVKIDS-PROGRAMMATION

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

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

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

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

  35. ANDROID - Système d\'exploitation

S'ABONNER A NOTRE NEWSLETTER

 

 


 

 

 

Affiche formation qualifiante 2023-202 cocody-decembre-janvier-fevrier-panel-consulting.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

 

site web e-commerce -Boutique en ligne - 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


vue receptioniste-application de gestion - Hôtel - Résidence - Panel Consulting.jpg - panel consulting
  • Posté le 04-10-2023 à 10:10:03

APPLICATION WEB DE GESTION DE COMPLEXE HÔTELIER ET RESIDENCE PRIVÉE

 

NOS PARTENAIRES

logo Chekina Business Center.png
logo_longrich_team_vision_plus.jpg
logo_benigloryservices.jpg
logo_longrich_emeraude.jpg
logo ds market.jpeg
logo YD.png
assistance sociale - light-star.jpg
logo ariel service.png
YES CHALLENGE.jpg