La plupart des sites que je consulte — et qui proposent une carte pour indiquer leur adresse de contact — affichent une map intégrée depuis une célèbre plateforme américaine. Avec tout ce que cela implique…

L’idée

Ajoutez à votre site web une carte sous Open Street Map (OSM) avec un marqueur géolocalisé, le tout en 3 min !

Nul besoin de coder la moindre ligne ni même d’être un designer expert : il vous suffit de copier-coller les petits morceaux de code ci-dessous à l’endroit indiqué 😋 Il sera simplement nécessaire de créer un compte MapBox pour utiliser de magnifiques fonds de cartes.

Le tout est totalement gratuit, libre et Open source ! Idéal pour personnaliser votre page de contact, ajouter une carte à vos widgets ou en pied-de-page de votre site… ! Contrairement à la plateforme américaine la plus utilisée pour les maps, cette carte ne conserve pas vos données, ne les utilise pas à votre insu; elle est par ailleurs entièrement modifiable et adaptable selon vos besoins, et vous pouvez utiliser d’autres modules pour l’améliorer, la diffuser…

Ce dont vous avez besoin

Avant de commencer, vous avez besoin de quelques éléments qui vous permettront de personnaliser votre carte. Techniquement, il vous faudra simplement modifier le morceau de code de la rubrique « Paramétrages » ci-dessous avec vos informations.

Coordonnées GPS de la balise

Utilisez le site openstreetmap.org pour chercher les coordonnées.

→ À modifier : [XXX-LATITUDE-XXX, XXX-LONGITUDE-XXX]

Coordonnées GPS du centre de la carte

Même méthode. Bien évidemment, vous pouvez utiliser les mêmes coordonnées que celles de votre balise : celle-ci se trouvera ainsi au centre de votre carte.

→ À modifier : [XXX-LATITUDE-CENTER-XXX, XXX-LONGITUDE-CENTER-XXX]

Fond de carte MapBox

  1. Créez un compte sur le site MapBox : cela vous permettra de personnaliser votre fond de carte,
  2. Récupérez votre Access Token : cliquez sur « Account » > puis sur l’onglet « API access token » dans le menu supérieur droit > cliquez enfin sur « Default Public Token » pour afficher votre Access Token
  3. → À modifier : XXX-YOUR-MAPBOX-ACCESS-TOKEN-XXX,
  4. Choisissez le type de fond de carte que vous souhaitez utiliser : light / dark / streets / outdoors / satellite… puis modifiez si besoin id: 'mapbox.streets' dans le code javascript_part.js

Ajoutez la carte à votre site

En-tête

Copiez-collez ce code entre les balises ‹head›‹/head› de votre site : il s’agit d’importer les éléments pour personnaliser l’intérieur de la carte (la balise notamment). Merci par ailleurs de conserver les mentions légales 😄

Design

Copiez-collez ce code CSS entre les balises ‹style›‹/style› au sein de l’en-tête ‹head›‹/head› de votre site, aussitôt après le code 1., il vous permettra de personnaliser l’apparence globale de votre carte.

Affichage

Copiez-collez ce morceau de code à l’endroit où vous souhaitez afficher votre carte : dans un article, en pied-de-page, dans un widget de colonne, etc.

Paramétrages

Ajoutez juste au dessous du précédent, le code Javascript suivant. Il sert à paramétrer votre carte : n’oubliez pas de personnaliser les informations (voir première partie de notre article).

Et voilà !

Ne vous reste plus qu’à infuser un délicieux thé 🍵 et à profiter du soleil !

Watch Download Follow @grouan

Pour en savoir +

Partages