Mettre une carte Google Maps sur son site Internet (tuto)
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 « <iframe », comme dans mon exemple :
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2710.207049454749!2d-1.5729033!3d47.2125309!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4805ec0fcda6c4cb%3A0xd620ca38dafa1e9a!2s2+Rue+La+Motte+Picquet%2C+44100+Nantes!5e0!3m2!1sfr!2sfr!4v1423244007186" width="600" height="450" frameborder="0"></iframe>
- 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
Exemple d’intégration d’une carte Google Maps dans une page web
Quoi de mieux qu’un exemple concret ! Voici ci-dessous le rendu de la carte Google Maps décrite dans ce tutoriel.
Elle présente l’emplacement de notre adresse en mode « Plan » mais vous pouvez basculer en « Images satellite » en cliquant sur le carré en bas à gauche. Vous retrouvez les boutons de zoom en bas à droite ; pour se déplacer sur la carte, il suffit de maintenir le clic sur la carte et déplacer la souris. Dans l’encadré blanc qui indique l’adresse, il est possible d’afficher la carte en grand dans une nouvelle page, tout comme lancer une recherche d’itinéraire.
Intégration d’une carte Google MyMaps sur son site internet
Suite au commentaire de Lola, je complète cet article par la procédure à suivre pour insérer une carte créée via l’outil Google MyMaps sur une page HTML ou une page WordPress :
- Il faut bien évidemment pour commencer une belle carte que vous aurez dessinée depuis Google MyMaps (voir celle utilisée dans ce tuto).
- Dans l’interface d’édition de votre Google My Maps (voir en plus les captures d’écran ci-dessous) :
- Cliquez sur le bouton « Partager » pour activer l’accès « public » en mode « Lecture » et validez.
- Cliquez sur les trois petits points superposés à côté du bouton « Partager » pour dérouler les actions supplémentaires et sélectionnez « Intégrer la carte à mon site« .
- Copiez le code HTML généré (balise iframe)
- Collez alors ce code dans votre page HTML ou article WordPress comme expliqué à l’étape 2 de ce tutoriel.
Clic sur le bouton « Partager »
Modification de l’accès
Activation de l’accès « public » en mode « Lecture »
Validation de l’accès public
Clic sur les trois petits points superposés et sélection de « Intégrer la carte à mon site »
Copie du code HTML à coller sur son site
Voici ci-dessous l’exemple concret de l’insertion d’une carte personnalisée avec Google My Maps dans cette page web :
Voilà, c’était pas bien compliqué, merci Google Maps et Google MyMaps ! Vous avez maintenant une belle carte, interactive qui plus est, qui donne une vraie valeur ajoutée, à votre page contact par exemple de votre site internet.
97 commentaires
Chipie
13 octobre, 2015Bonjour !
Je suis à la recherche d’un constructeur de carte interactif, dont on pourrait modifier les couleurs. Je connais « map buildr », mais tous les designs proposés ne me conviennent pas ; cela manque d’élégance.
Merci et bonne journée 😉
Sébastien
20 octobre, 2015Bonjour, je ne connaissais pas Map buildr, cela semble intéressant, merci du partage. Sinon tu peux essayer les cartes « My Maps » quand tu es connecté à ton compte Google ou alors directement utiliser l’API de Google Maps https://developers.google.com/maps/. Bonne continuation.
Magalie JOLLY
16 novembre, 2015Super article, super tuto! Tout bien expliqué et illustré. Installé en 5 minutes, tout marche parfaitement, merci à vous!;-)
Sébastien
16 novembre, 2015Merci de votre retour Magalie. Bonne continuation !
Lola
29 décembre, 2015Bonjour,
Je n’arrive pas à intégrer une carte que j’ai faite sur google mymaps et de l’intégrer dans wordpress..
Avez vous une solution ?
Sébastien
30 décembre, 2015Bonjour Lola,
je viens de détailler la réponse en compétant le tuto ; bonne intégration 😉
Nui
10 janvier, 2016Le tuto, rien à redire, ce qui me gêne, c’est d’utiliser un iframe pour l’intégration. existe t’il une alternative à l’iframe?
L’iframe est obsolète depuis un moment, et google lui même le déconseille dans vos page web. Cherchez l’erreur…. faites ce que je dit, pas ce que je fait.
Le validateur W3C met aussi votre page non valide. et on obtient l’erreur suivante:
Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
Sébastien
10 janvier, 2016Merci de votre retour.
L’iframe reste le moyen le plus simple et rapide pour mettre en place une Google Maps surtout sans connaissances techniques. Après si vous avez des bases en développement web (HTML et Javascript) il est tout à fait possible d’intégrer des cartes plus « proprement » via notamment l’API Google Maps pour le Web disponible à l’adresse https://developers.google.com/maps/web/?hl=fr.
Google ne recommande pas l’iframe, en effet, mais cela en terme de référencement. La Google Map n’ayant aucun contenu indexable, l’utilisation de l’iframe n’est pas dérangeant.
Enfin, pour être valide W3C, il vous est possible de retirer l’attribut frameborder (frameborder= »0″), vous devrez alors passer par les styles CSS pour personnaliser le graphisme de l’iframe.
Alain CLERO
22 septembre, 2016Ammonite.76
Bonjour et merci pour vos informations. Malheureusement, j’ai beau cherché, je ne trouve nulle part la réponse à ma question. Je crée actuellement un site sous WordPress pour un groupement régional d’association d’Amis de Musées. J’ai créé, pour ma page d’accueil, une carte avec des marqueurs pour chaque ville où se trouve une association. Je souhaiterais maintenant que ce marqueur comporte un lien vers la page propre de l’association à l’intérieur du site mais je ne trouve rien là dessus. J’ajoute que je ne suis pas un informaticien chevronné et n’ai guère l’habitude de manier du code (même si j’ai fait, il y a déjà quelques temps, de la programmation en clipper -Dbase – eh oui ! ça date). Je veux simplement dire que je ne suis pas familier des langages modernes comme JAVA. Y a-t’il un moyen simple de résoudre mon problème ? Merci d’avance.
Sébastien
22 septembre, 2016Bonjour Alain, pour insérer un lien dans les infobulles de votre carte Google Maps, il suffit de mettre un lien HTML de type <a href="adressedusite" target="_blank">Libellé du lien</a> dans le descriptif du contenu des infobulles. Espérant vous avoir aidé 😉
Alain CLERO
22 septembre, 2016Merci de cette réponse très rapide. Je n’ai pas le temps d’essayer maintenant mais je vous tiens au courant.
André
14 novembre, 2016Merci pour ce tutoriel, bien utile, j’ai réussi l’intégration en quelques minutes seulement. A bientôt !
Sébastien
15 novembre, 2016Super ! Ravi d’avoir pu vous aider. A bientôt 😉
guigui2
7 janvier, 2017Bonjour comment afficher le lien en fonction des coordonnées entrées, je veux comprendre la signification des variables envoyé en paramètres
Sébastien
7 janvier, 2017Bonjour, l’interface de Google Maps a quelque peu changé. Pour trouver le lien pour générer le code de la carte, il faut cliquer sur le lien « Partager » en haut à gauche sous le résultat de la recherche, puis ouvrir l’onglet « Intégrer la carte ». Les variables en paramètres dans le lien sont l’adresse, les coordonnées GPS et des données propres à Google. Bonnes continuations.
fatou
20 mars, 2017Bonjour Sébastien,
merci pour ton aide, c’était un tuto très riche, j’ai appris des choses de tes réponses aux commentaires aussi 🙂
merci infiniment
Sébastien
20 mars, 2017Bonjour Fatou, merci pour ton commentaire, ravi d’avoir pu t’aider.
Alexandre
3 mai, 2017Bonsoir,
Comment peut-on intégrer un carte du même genre avec la possibilité d’y entrer un point de départ et un point d’arrivée pour que cela calcule le prix d’une course ?
Je précise, je suis vtc et je fais mon site avec wix. Je peux y intégrer du code html mais je n’y connais rien.
Merci pour votre aide.
Sébastien
10 mai, 2017Bonjour Alexandre,
Ce que vous voulez faire est faisable, mais il vous faudra des connaissances en HTML et javascript.
Vous devrez passer par l’API Google Maps dont vous trouverez la documentation sur la page https://developers.google.com/maps/web/?hl=fr
Bonnes continuations.
Marino
19 mai, 2017Bonjour,
J’ai commencé à intégrer une carte avec des adresses . Ca marche très bien mais je voudrais changer l’affichage :
– plutôt ouvrir une bulle que le volet à gauche quand on clique sur un repére
– masquer le bandeau du haut avec le menu, le titre etc …
Est ce que c’est possible ?
Merci pour votre aide
Marino
Sébastien
19 mai, 2017Bonjour Marino,
Ce que vous voulez faire est tout à fait réalisable, mais il vous faudra des connaissances en HTML et javascript.
Vous devrez passer par l’API Google Maps dont vous trouverez la documentation sur la page https://developers.google.com/maps/web/?hl=fr
Bonnes continuations.
céleste
3 septembre, 2017Intégration d’une carte Google MyMaps sur son site internet
Cliquez sur les trois petits points superposés à côté du bouton « Partager » pour dérouler les actions supplémentaires et sélectionnez « Intégrer la carte à mon site« .
Bonjour,
Ca ne marche plus, les trois petits points et donc la commande « Intégrer la carte à mon site« n’existe plus dans google mymaps !
Comment faire ?
Cordialement,
céleste
3 septembre, 2017Ah ! Les 3 points sont montés et sont maintenant situés au niveau du titre de la carte.
Cordialement,
Sébastien
4 septembre, 2017Bonjour Céleste,
Merci d’avoir précisé les subtilités de la mise à jour de l’interface de Google Maps 😉
Cordialement.
Pierre
13 septembre, 2017Bonjour,
…. dans le site la carte ne s’ouvre pas à l’échelle fixée dans « définir la vue par défaut »:
comment imposer l’échelle lors de l’affichage de la carte dans le site?
Bonne journée
Sébastien
15 septembre, 2017Bonjour Pierre,
Avez-vous essayé de caler l’échelle à votre convenance avant de générer le code de l’iframe ?
Cordialement.
Pierre
16 septembre, 2017… ah oui ça aurait été super d’avoir l’échelle codée dans les param de l’i-frame….
mais non malheureusement ça ne change rien de copier après la mise à l’échelle et « définir la vue par défaut »
En fait il me semble qu’il y a 1 incrément d’échelle de différence. On arrive à imposer ce qu’on veut.
En revanche l’échelle est correctement gérée avec lien partagé!
Merci
Bonne journée
Sébastien
26 septembre, 2017Super ! Merci de votre retour Pierre.
serge
20 septembre, 2017Bonjour
Merci Pour ce Tutoriel très utile.
Merci de partager vos connaissance
Cela fonctionne parfaitement.
serge
Sébastien
26 septembre, 2017Bonjour Serge, merci pour votre commentaire. Cela fait toujours plaisir 🙂
Christophe
28 septembre, 2017Bonjour. Merci pour ce tuto et toutes ces informations. Savez-vous comment faire pour conserver le menu qui permet de selectionner les calques d’une carte Google Mymaps dans une intégration de page internet svp ?
Lorsqu’on accède au lien de partage, le « menu » (la liste des calques avec les cases à cocher pour les selectionner) est présent mais il n’apparaît pas quand on intègle le code de la carte sur une page html.
Sébastien
29 septembre, 2017Bonjour Christophe, je vous remercie de votre retour.
Il vous est possible de sélectionner les calques de votre carte Mymaps en cliquant sur l’icone en haut à gauche de votre intégration, à côté de « Carte MyMaps » (voir l’exemple d’intégration du tuto).
Espérant avoir répondu à votre question. Cordialement.
Christophe
29 septembre, 2017Merci ! je n’avais pas vu ce petit bouton. Et je pense que je ne serai pas le seul… Y a t il un moyen de l’activer par défaut au chargement de la page svp ?
Sébastien
2 octobre, 2017Il est vrai que cela n’est pas très intuitif ! Je n’ai pas trouvé de paramètre possible dans la doc : https://developers.google.com/maps/documentation/embed/guide?hl=fr 🙁 Avez-vous trouvé quelque chose de votre côté ?
Christophe
2 octobre, 2017Non, je n’ai rien trouvé. Je n’ai jamais utilisé l’API Google Maps. Il me semble avoir compris que ça n’est pas destiné aux mymaps enregistrées et dans tous les cas je n’ai pas vu de paramètres liés aux calques. Savez-vous s’il existe un support Google auquel je pourrais m’adresser (même s’il est payant) ?
Amicalement,
Sébastien
3 octobre, 2017Désolé, je n’en connais pas à mon niveau.
Peut-être en trouverez vous sur les différents sites de Google mais en général, il est possible de les contacter pour des services payants…
Henaff
8 octobre, 2017Pour être bref, merci de par la simplicité de capture de lien et utilisation dans le site web en construction. Utilisant WP pour la première fois j’avoue que ce n’est pas simple et je ne suis pas programmateur alors bonjour les difficultés. Mais cette explication m’a grandement simplifié cette tâche localisation.
Petit hic je crois que toutes mes adresses apparaissent sur cette carte, lieux fréquentés ou visités. Là c’est du domaine privé et je ne sais comment y remédier?
Bravo et merci encore.
Maintenant je vais m’attaquer au calendrier de réservations à intégrer et ensuite tarifs, du travail donc…
Sébastien
10 octobre, 2017Bonjour et merci de votre retour.
Rassurez vous, vos adresses apparaissent car vous êtes probablement connecté à votre compte Google.
Ce ne sera pas le cas de vos visiteurs.
Essayez de vous déconnecter de Gmail, Youtube ou autre service Google pour voir.
Bonne suite.
Blandine
26 octobre, 2017Bonjour,
Merci pour ce tutoriel mais malgré les explications très claires le résultat obtenu ne correspond pas.
1. Quand j’intègre une carte de google maps avec un point de repère la carte apparaît en mappemonde et au zoom mon repère n’est pas signalé.
2. Quand j’intègre une carte créée à partir de mymaps au lieu de la carte s’affiche :
« 404. That’s an error L’url demandé est introuvable sur ce serveur.
That’s all we know »
Pour information le site internet est hébergé et géré par une société informatique, est-ce que le problème vient de là ?
J’attends votre retour.
Merci beaucoup !!
Sébastien
27 octobre, 2017Bonjour Blandine,
Le problème peut venir de plusieurs choses.
Pouvez-vous me transmettre l’adresse de votre page sur laquelle vous rencontrez le dysfonctionnement svp ?
Blandine
27 octobre, 2017Bonjour,
Voici l’adresse du site : https://www.boisdanjou.fr/
Sébastien
29 octobre, 2017Bonjour,
Pouvez-vous préciser l’adresse de la page exacte où se trouve la carte svp ?
Blandine
31 octobre, 2017Bonjour,
Voici l’adresse de la page où se trouve les deux cartes (la première de google et la seconde personnalisée) : https://www.boisdanjou.fr/info-pratique/les-mairies-des-bois-d-anjou.html
Merci
Sébastien
31 octobre, 2017Bonjour Blandine,
les codes d’intégration HTML de vos cartes ne sont pas complets, notamment l’attribut de la balise iframe est tronquée, il manque l’identifiant de la carte après embed?pb=
Peut-être utilisez-vous un CMS qui corrige le code lors du copier-coller. Vérifiez bien le code HTML implémenté (code source).
Cordialement.
Blandine
31 octobre, 2017Bonjour,
Merci d’avoir pris le temps de regarder. Je pense en effet, qu’il y a un CMS qui corrige le code au copier-coller puisque je m’étais aussi rendu compte de cette partie était supprimée. Le problème est le même pour l’intégration de la carte personnalisée ?
Merci
Sébastien
31 octobre, 2017Oui le problème est commun aux deux cartes. Sinon avez-vous accès à l’éditeur en mode « code » dans votre CMS afin de corriger l’iframe ?
Blandine
2 novembre, 2017Bonjour,
Non je n’ai pas accès en mode « code ».
Je vous remercie néanmoins d’avoir pris le temps de répondre à mes questions et vous souhaite une bonne continuation !
Cordialement
Sébastien
2 novembre, 2017Je vous en prie Blandine, bonnes continuations également.
Rémy
8 novembre, 2017Bonjour,
ce que je cherche à faire est un peu différent et je ne trouve aucune indication sur comment faire.
Je voudrais pouvoir afficher une barre de recherche dans laquelle un utilisateur rentrerai un code postal et qui obtiendrait en retour une liste d’adresse des librairies les plus proches ainsi qu’une Google Map.
Est-ce que vous auriez une idée de comment faire ?
Cordialement
Sébastien
10 novembre, 2017Bonjour Rémi,
Ce que vous voulez faire est possible via l’API Google Maps :
https://developers.google.com/maps/web/?hl=fr
Il vous faudra des connaissances en développent, notamment avec le langage Javascript.
Cordialement.
Emilie
26 décembre, 2017Merci , Tuto simple et efficace
Sébastien
26 décembre, 2017Merci de votre retour Émilie. À bientôt.
Stéphane
19 janvier, 2018Bonjour et merci pour votre article.
Cependant je rencontre un problème avec google map.
Pour faire simple, je possède un site web dont l’essentiel de l’activité se fait via smartphone! c’est une webapp à vrai dire…
Je souhaite partager des adresses soigneusement sélectionnées sur google map, je fais une copie du liens en URL courte, que j’intègre à mon site via un bouton nommé « Nous situer ».
Celui ci mène lorsque l’on clique dessus à la carte indiquant via le curseur, l’adresse préalablement sélectionnée par mes soins! Le problème est que la carte et toute l’interface ne se comportent pas comme l’application google map. Je pourrai me contenter du rendu et des quelques fonctions affichées mais l’essentiel manque! le bouton « itinéraire » ne propose pas la navigation GPS. l’appareil affiche la position de l’utilisateur, le trajet à emprunter avec des propositions tel que avec ou sans péage mais la navigation GPS 3D n’apparaît nul part!!!
Il est vrai que la carte apparaît dans le navigateur et j’aurai préféré que l’activation du lien ouvre directement l’application google map des smartphones des utilisateurs afin de bénéficier de toutes les fonctions de guidage.
Si vous avez une solution, vous m’enlèverez une belle épine du pied!
Par avance merci pour l’attention que vous porterez à mon post
Cordialement
Sébastien
19 janvier, 2018Bonjour Stéphane, cela va dépendre du smartphone de l’internaute et des applis GPS installées. Certains le font déjà. Pour plus d’infos, vous pouvez consulter ce forum : https://openclassrooms.com/forum/sujet/lancer-application-depuis-une-page-html-13984
Bonnes continuations.
Stéphane
19 janvier, 2018Merci Sébastien, je vais consulter votre liens
Cordialement
Hermann Boizi
9 mars, 2018Merci à vous pour cet article qui m’a aidé à y voir un peu plus clair sur l’intégration des cartes perso.
cordialement le Prince Bakouby.
Sébastien
9 mars, 2018Super ! Ravi que le tuto vous ait été utile. Cordialement.
Girin
2 mai, 2018Bonjour !
Merci pour ce tuto très bien détaille !
En revanche j’ai un on problème au niveau de l’intégration sur mon site (qui est toujours en construction)
J’utilise JIMDO et lorsque j’intège le code HTML, la carte interactive est utilisable en mode « modifications », mais lorsque je passe en mode visiteur pour regarder le rendu, ma carte n’est plus interactive…
Savez-vous de quoi cela peut provenir ?
Merci !!!
Sébastien
2 mai, 2018Bonsoir,
C’est difficile de dire sans pouvoir voir l’intégration.
Je ne connais pas JIMDO, peut-être qu’il modifie le code en mode « visiteur ».
Pourrez-vous partager la page quand votre site sera lancé ? Je pourrai alors mieux vous aider.
Cordialement.
sandra
14 septembre, 2018bonjour, existe t’il une autre carte que google à intégrer facilement à un site ? merci
Sébastien
14 septembre, 2018Bonjour Sandra, il existe également OpenStreetMap, l’équivalent de Google Maps en mode collaboratif, mais il est moins documenté. Google Maps à l’avantage d’être simple à implémenter sur votre site web. Cordialement.
Luc BEAUPÈRE
14 septembre, 2018Bonjour
Mon journal sur openstreetmap.org avec des liens vers des traces, des cartes sur Facebook, Google Maps et Géoportail
https://www.geoportail.gouv.fr/ est vraiment très bien, les cartes sont bien mieux que Google maps, il y a de multiples couche, on peut uploader et afficher ses traces comme des couches.
Il y a un lien d’intégration
Par contre pour tracer un itinéraire Google Maps/Vos adresses/Cartes Ouvrir dans My Maps est très bien pour tracer un itinéraire
https://www.google.com/maps/d/u/0/edit?hl=fr&mid=1P-5l7OOZ1MdU8i4y53033MzHwz8&ll=48.73416121663256%2C2.064348675254905&z=14
Exemple de carte google maps et geoportail intégrées dans facebook, mais seulement 2 sont gratuites
https://www.facebook.com/randonneesyvette/?sk=app_190322544333196&app_data=visitor_mode
kadhafi
24 novembre, 2018Merci bien ça marche
Daniel
21 janvier, 2019Première étape : »cliquez sur l’icône en forme de roue crantée »
Et je suis déja planté car il n’a pas de roue cranté sur ma carte https://maps.google.fr/ !
Seule explication que je trouve : est-ce qu’il n’est pas obligatoire d’avoir un compte Google pour bénéficier de cette fonction ?
Dans ce cas si on est Googlophobe (si on n’aime pas se faire pister ni espionner) c’est NO-WAY ?
Sébastien
25 janvier, 2019Bonjour Daniel,
Non pas besoin d’être connecté à son compte Google, l’interface a quelque peu changé.
Après avoir saisi votre adresse, il vous faut juste cliquer sur « PARTAGER » dans la colonne de gauche
où se trouvent tous les détails de la localisation.
Bien à vous.
Vanderroost
28 février, 2019Bonjour,
Je suis actuellement en projet pour mon bac dans lequel je dois référer plusieurs points. Et grâce à votre tuto j’ai réussi à intégrer ma carte sur ma page html mais je n’arrive pas à la positionner que ce soit en html ou dans mon CSS j’aimerais bien avoir de l’aide si possible.
Merci d’avance
Sébastien
1 mars, 2019Bonjour,
Cela peut venir de beaucoup de chose.
Avez-vous une adresse à me donner pour que je jette un œil au code HTML/CSS ?
Zakaria RIFFI
9 août, 2019Merci 😉
jean-luc GENET
17 septembre, 2019Bonjour
je nai pas lu tous les commentaires mais le plus simple et interactif au niveau des cartes est d’utiliser openstreetmap avec des outils comme umap ou gogocarto, …
librement et sans vol de données personnelles
jean-luc GENET
17 septembre, 2019Pour les itinéraires graphhopper.com … j’ai fait tout mon itinéraire vélo été avec et c’est top, on peut récupérer les GPX et les intégrer à umap : https://umap.openstreetmap.fr/fr/map/euro-velo-15-koln-rotterdam-ete-2019_334804#8/51.712/5.515
à voir
Jean-Luc
Sébastien
17 septembre, 2019Merci Jean-Luc pour ces partages 😉
Nadège
6 janvier, 2020Bonjour,
Merci pour ce tuto et ces explications ! J’ai fait ça en 3 min ! Hyper simple ! et j’adore le nom de votre site !
Sébastien
6 janvier, 2020Bonjour, merci de votre retour Nadège 😉
Dada Sovido
28 janvier, 2020Je vous prie de me dire si il existe une autre méthode même difficile que celle-ci mais qui ne nécessite pas de placer le « <iframe » sur le site.
Vu que « <iframe » n'est pas très bien perçu. :/
Sébastien
28 janvier, 2020Bonsoir Dada,
Vous pouvez directement utiliser l’API de Google : Maps https://cloud.google.com/maps-platform/
Après selon l’usage, l’iframe peut très bien faire l’affaire 😉
Bonnes continuations
Dada Sovido
28 janvier, 2020Ah, merci à vous Sébastien.
zydro
11 février, 2020Bravo pour tous ces articles précieux quand on se lance !!! Merci 1000 fois!
Sébastien
11 février, 2020Merci de votre retour 😉
Claude
17 mars, 2020Super article, super tuto, Tout bien expliqué et illustré.
Sébastien
17 mars, 2020Merci 😉
Claude
14 juin, 2020Bonjour Sébastien
Je voudrais savoir avec quelle adresse il faut activer son compte mygoogle business lord de la création de son emplacement dans google map.
Sébastien
15 juin, 2020Bonjour Claude,
Il vous est possible d’y accéder en cliquant sur le lien « Revendiquer cet établissement » depuis votre fiche dans Google Maps ou bien directement depuis la gestion des établissements depuis l’URL : https://business.google.com/locations?hl=fr
Bien cordialement.
Jean Rénel Ambroise
16 octobre, 2020Bonjour Sébastien,
Merci beaucoup pour cet article. Mon problème, c’est ma carte disparait sur le site une fois que j’actualise la page. Comment puis-je bien enregistrer le code Html pour que la carte reste ?
Merci d’avance.
Sébastien
16 octobre, 2020Bonjour,
Merci de votre retour.
Pouvez-vous préciser la page (URL) de votre site et l’éditeur ou CMS que vous utilisez ?
Bien cordialement.
Dah kpingla
19 octobre, 2020Bonjour, Comment je pourrai procéder pour mettre la carte sur mon site WordPress.
Sébastien
8 décembre, 2020Bonjour, le principe est le même pour un site WordPress. Bien à vous.
Ghezo
4 décembre, 2020Merci infiniment pour la technique.
cela m’a vraiment aidé.
Sébastien
8 décembre, 2020Je vous en prie 😉
ZOYEYE@Grand médium
14 décembre, 2020Merci monsieur, ça marche bien
lumieresvie
12 janvier, 2021Moi qui me prenait la tête depuis à chercher comment y arriver 😀
Merci Sébastien, grâce à vous j’ai pu le faire facilement. Vous êtes superbe
Gérald
16 février, 2021Bonjour,
J’aimerais mettre une carte MyMaps sur mon site mais avec une géolocalisation.
En d’autres termes, la carte se serait automatiquement centrée sur la localisation de la personne.
Quelqu’un a-t-il une astuce simple ?
D’avance merci !
Gérald
Sébastien
17 février, 2021Bonjour Gérald,
Il va vous falloir je pense vous pencher sur l’API Google Maps : https://developers.google.com/maps/documentation/javascript/examples/map-geolocation#maps_map_geolocation-javascript
Bien à vous.
Gérald
26 février, 2021J’avance doucement…
Mais j’ai de gros soucis :
1) Il apparaît plusieurs « For development purpose only » sur la carte.
2) Pour la page HTML sur mon disque dur, pas de souci pour la géolocalisation, pour la page publiée sur internet j’ai le message « Error: The Geolocalistion service failled »
3) Comment insérer les données de ma carte MyMaps ?
D’avance merci !
Gérald
Sébastien
26 février, 2021Voici quelques pistes pour solutionner les problèmes :
1) https://www.journaldunet.fr/web-tech/developpement/1440900-que-faire-si-google-maps-affiche-for-development-purposes-only/
2) Il faut probablement autoriser le navigateur à accéder aux données de géolocalisation (à côté de la barre d’adresse)
3) Je pense qu’il faille ajouter les éléments (marqueurs, etc.) avec les outils proposés par l’API
Vincent Sahuc
3 juillet, 2021MERCI 1000 FOIS !!!
Cela fait des heures que je me bats avec les clés API de Google Cloud (un vrai labyrinthe protocolaire !)
Cette technique est si simple ! Je peux enfin afficher la carte que je veux sur le site de mes clients !
Sébastien
23 juillet, 2021Super 🙂