Mappy - Widget Carte

Mappy vous propose de bénéficier de fonctionnalités cartographiques avancées sur votre site en un clin d’œil. Découvrez sur cette page quels services sont proposés et comment les intégrer facilement sur votre site.

Présentation

Des fonctionnalités pratiques

Afficher une carte détaillée
Grâce au widget, vous affichez une carte centrée sur l’adresse de votre choix et au niveau de zoom souhaité. Vous bénéficiez de la couverture cartographique mondiale de Mappy (150 pays) et mise à jour régulièrement.

Une information trafic riche
Informez vos visiteurs de l’état du trafic dans leur région. Le widget peut afficher les conditions de circulation sur les 80.000km de voies les plus importantes en France. L’information issue de TomTom HD Trafic est mise à jour toutes les 2 minutes pour offrir une très grande précision.

Un itinéraire de référence
Vos utilisateurs peuvent également calculer un itinéraire dans le mode de transport le plus adapté. Nous proposons des itinéraires voiture, vélo, piéton et transport en commun. L’itinéraire est affiché sur le site Mappy afin de bénéficier des nombreuses fonctionnalités du site.

Des points d’intérêt utiles
Avec ce widget, vos visiteurs peuvent facilement localiser des catégories de points d’intérêt (POI) les plus fréquemment demandées. Les catégories de POI proposées sont les hôtels, restaurants, cinémas, parkings et évènements (modification possible en fonction des catégories définitives). L’affichage des réponses s’effectue sur Mappy pour une plus grande lisibilité.

Avantages

Simplicité d’intégration
Le widget s’intègre sans aucun développement. Il vous suffit de copier/coller le code du widget.

Personnalisation facile
Le widget est paramétrable pour assurer l’affichage du bon plan à vos utilisateurs.

Evolutivité et performance
Vous bénéficiez des évolutions fonctionnelles, de la mise à jour des données, et de la performance d’un service utilisé sur des sites à forte audience tels que Mappy et PagesJaunes.

Conditions d'utilisation du service

Documentation technique

Intégration de l'iframe dans votre site

L'iframe permet d'intégrer le widget au sein de votre propre site. Cette intégration est très simple à réaliser :

Votre site

Widget mappy

Code HTML d'intégration

Il vous suffit de créer une iframe vers l'URL du widget à laquelle vous aurez éventuellement ajouté les paramètres précisés dans la section Transmission de paramètres.

<iframe src="https://widgets.mappy.com/map?parametre1=valeur1&parametre2=valeur2" width="300" height="450" scrolling="no"></iframe>

Le widget a été conçu pour être intégré dans une iframe aux dimensions minimales de 300 pixels en largeur et 450 pixels en hauteur. Le widget se redimensionnera avec la page si votre site est élastique.

Si vous initialisez le widget avec une taille inférieure aux dimensions minimales, la carte ne pourra pas être affichée et vous obtiendrez un message d'erreur technique dans le widget.

Transmission de paramètres

Les paramètres optionnels suivants peuvent être transmis dans l'URL afin de configurer le widget à l'initialisation (tous les noms de paramètres et leurs valeurs sont insensibles à la casse) :

NomDescription
fullAddressDescription : Adresse textuelle
Type : string - Valeur par défaut : chaîne vide
latDescription : latitude en degré décimaux (4 décimales avec séparateur point ou virgule)
Type : decimal - Valeur par défaut : 46.5992
lngDescription : longitude en degré décimaux (4 décimales avec séparateur point ou virgule)
Type : decimal - Valeur par défaut : 2.4945
zoomLevelDescription : niveau de zoom de la carte, compris entre 0 (plus petite échelle) et 15 (plus grande échelle)
Type : integer - Valeur par défaut : 3
showTrafficDescription : activation de la couche d'info-trafic sur la carte et de la légende
Type : boolean - Valeur par défaut : false
showPositionMarkerDescription : activation du marqueur d'adresse sur la carte.
Type : boolean - Valeur par défaut : false
showItineraryTabDescription : activation de l'onglet pour le cacul d'itinéraire
Type : boolean - Valeur par défaut : true
showLocateTabDescription : activation de l'onglet pour la recherche d'adresse
Type : boolean - Valeur par défaut : true
markersDescription : ajout de marqueurs sur la carte
Type : string - Valeur par défaut : unknow
keyDescription : clé identifiant partenaire
Type : string

Règles fonctionnelles associées aux paramètres :

Règles spécifiques au paramètre 'markers' :

Les marqueurs sont personnalisables, soit avec une couleur, soit avec une image (format : png, largeur: 40px, hauteur: 50px).
Les marqueurs peuvent afficher une popup au clic avec l'adresse géolocalisée du marqueur.
Les options du paramètre markers sont à mettre les unes à la suite des autres, séparées par "|".
On peut mettre autant d'adresses ou lat,lng que voulu à la suite, tant que le nombre de caractères de l'url ne dépasse pas 2048.

optionDescription
colorDescription : Couleur du marqueur à utiliser
Type : string - Valeur par défaut : blue
Valeurs possibles : black, brown, green, purple, yellow, blue, gray, orange, red
urlDescription : Url de l'image à utiliser pour le marqueur
Type : string - Valeur par défaut : unknow
popupDescription : Au clic sur le marqueur, ouverture d'une popup contenant l'adresse géocodée
Type : Booléen - Valeur par défaut : false

Exemples :
markers=color:red|popup:true|126 rue de charenton paris|46.12764,6.11309
markers=url:http://tinyurl.com/2948374|126 rue de charenton paris|46.12764,6.11309
markers=126 rue de charenton paris|46.12764,6.11309

On peut chainer les appels au paramètre markers pour modifier le style de certains marqueurs.
Exemple: markers=color:red|popup:true|126 rue de charenton paris&markers=url:http://tinyurl.com/2948374|popup:false|46.12764,6.11309

Compatibilité navigateurs

Exemples d'intégration

Il vous suffit de créer une iframe vers l'URL du widget à laquelle vous aurez éventuellement ajouté les paramètres précisés dans la section Transmission de paramètres.

Exemple n°1

Avec l'exemple ci-dessous, vous obtenez un widget de 300x450 pixels représentant un plan de quartier centré sur le 126 rue de Charenton à Paris avec un marqueur d'adresse et aucun onglet n'est visible :

Code HTML :

<iframe src="https://widgets.mappy.com/map?fullAddress=126 rue de charenton paris&zoomLevel=8&showPositionMarker=true&showItineraryTab=false&showLocateTab=false&key=id_partenaire" width="300" height="450" scrolling="no"></iframe>

Résultat :

Exemple n°2

Avec l'exemple ci-dessous, vous obtenez un widget de 900x500 pixels représentant un plan de ville centré sur le 2 rue du 8 Mai 1945 à Mont-de-Marsan, avec les 3 onglets visibles et l'info trafic :

Code HTML :

<iframe src="https://widgets.mappy.com/map?fullAddress=2 rue du 8 Mai 1945 Mont-de-Marsan&zoomLevel=7&showTraffic=true&key=id_partenaire" width="600" height="500" scrolling="no"></iframe>

Résultat :

Générateur d'url

Le formulaire ci-dessous vous permet de générer et de tester un paramétrage. La description des paramètres est disponible ici.