Affichez votre itinéraire et vos notes sur votre site web

Une carte intégrée classique affiche un repère, mais cela n’aide pas un invité à trouver l’entrée latérale, un visiteur à suivre le chemin depuis la gare ou un client à voir où vous livrez. Draw on a Map vous permet de dessiner ces détails avant d’intégrer la carte terminée. Vous n’avez besoin ni d’une clé API ni d’un compte.

Créer la carte et copier le code d’intégration

1. Ouvrez Draw on a Map et recherchez votre lieu.
2. Dessinez l’itinéraire, la zone, les flèches ou les notes.
3. Réglez le zoom et déplacez la carte pour afficher la vue que vous souhaitez montrer en premier aux visiteurs. La carte intégrée s’ouvre sur cette vue.
4. Sélectionnez le bouton Intégrer (</>) dans la barre d’outils supérieure.
5. Choisissez où vous allez coller le code : HTML, WordPress, Wix ou Squarespace. La boîte de dialogue affiche les étapes propres à cette plateforme.
6. Réglez la hauteur et sélectionnez Copier le code.
7. Collez le code dans votre page, publiez-la et vérifiez-la sur un ordinateur et un téléphone.

Dans WordPress, collez le code dans un bloc HTML personnalisé. Dans Wix, ajoutez Intégrer du code → Intégrer du HTML. Dans Squarespace, ajoutez un bloc Code réglé sur HTML.

À quoi ressemble le code

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Intégration de carte Draw on a Map"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>

Il s’agit d’un modèle. Copiez le code réel depuis la boîte de dialogue Intégrer cette carte, qui renseigne l’attribut src pour votre carte. La largeur s’adapte à la colonne qui contient la carte. Modifiez height si votre page nécessite une carte plus haute ou moins haute.

Les cartes intégrées gratuites affichent « Propulsé par Draw on a Map ». Pour supprimer cette mention, enregistrez la carte et passez à Pro.

Maintenir la carte intégrée à jour

Enregistrez la carte dans votre compte avant de copier le code. La carte intégrée affiche alors la dernière version enregistrée : vous pouvez ainsi corriger un itinéraire ou déplacer un repère sans modifier votre site web.

Le code copié depuis une carte non enregistrée stocke le dessin dans l’URL. Il ne change pas lorsque vous modifiez la carte. Après une modification, sélectionnez de nouveau Intégrer, copiez le nouveau code et remplacez l’ancienne iframe.

Les grands jeux de données importés ne tiennent pas dans une URL. Si la boîte de dialogue Intégrer cette carte vous demande d’enregistrer d’abord la carte, faites-le, puis sélectionnez de nouveau Intégrer.

Si la carte ne s’affiche pas

Utilisez un bloc qui accepte le code HTML ou iframe. Un champ qui accepte uniquement une adresse web ne fonctionne pas avec une iframe complète. Si la carte disparaît après la publication, votre outil de création de sites supprime peut-être les iframes. Vérifiez ses paramètres relatifs au contenu intégré.

Idées de cartes pour sites web

• Événements et mariages : indiquez la bonne entrée, l’arrêt de la navette et le parking sur une seule carte.
• Locations et voyages : dessinez le trajet à pied de la gare à l’appartement ou le raccourci vers la plage.
• Entreprises de services : dessinez la zone que vous desservez. Si les visiteurs doivent vérifier leur propre adresse, le Service Area Widget payant transforme cette limite en outil de vérification d’adresses pour votre site.

Créez la carte de votre site web

Guides associés

• Dessiner un cercle sur une carte : délimitez une zone de livraison ou de service avec un rayon précis
• Dessiner sur Google Maps : transférez une carte Google My Maps existante avant de l’intégrer
• Partager un itinéraire à pied personnalisé : dessinez un itinéraire qu’une application de navigation calcule mal