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¶metre2=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) :
| Nom | Description |
|---|---|
| fullAddress | Description : Adresse textuelle Type : string - Valeur par défaut : chaîne vide |
| lat | Description : latitude en degré décimaux (4 décimales avec séparateur point ou virgule) Type : decimal - Valeur par défaut : 46.5992 |
| lng | Description : longitude en degré décimaux (4 décimales avec séparateur point ou virgule) Type : decimal - Valeur par défaut : 2.4945 |
| zoomLevel | Description : niveau de zoom de la carte, compris entre 0 (plus petite échelle) et 15 (plus grande échelle) Type : integer - Valeur par défaut : 3 |
| showTraffic | Description : activation de la couche d'info-trafic sur la carte et de la légende Type : boolean - Valeur par défaut : false |
| showPositionMarker | Description : activation du marqueur d'adresse sur la carte. Type : boolean - Valeur par défaut : false |
| showItineraryTab | Description : activation de l'onglet pour le cacul d'itinéraire Type : boolean - Valeur par défaut : true |
| showLocateTab | Description : activation de l'onglet pour la recherche d'adresse Type : boolean - Valeur par défaut : true |
| markers | Description : ajout de marqueurs sur la carte Type : string - Valeur par défaut : unknow |
| key | Description : clé identifiant partenaire Type : string |
Règles fonctionnelles associées aux paramètres :
- Si le widget est initialisé sans paramètre fullAddress ni lat/lng, la carte est centrée sur la France.
- Si fullAddress et lat/lng sont fournis, alors lat/lng est prioritaire sur fullAddress.
- Si zoomLevel est omis la carte s'affiche au niveau correspondant à l'adresse ou à la lat/lng.
- Le paramètre key est obligatoire.
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.
| option | Description |
|---|---|
| color | Description : Couleur du marqueur à utiliser Type : string - Valeur par défaut : blue Valeurs possibles : black, brown, green, purple, yellow, blue, gray, orange, red |
| url | Description : Url de l'image à utiliser pour le marqueur Type : string - Valeur par défaut : unknow |
| popup | Description : 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
- Internet Explorer : 8.x et supérieur.
- Firefox : 10.x et supérieur.
- Chrome : 17.x et supérieur.
- Safari : 5.x et supérieur.
- Android : 4.2 et supérieur.
- iOS : 7 et supérieur.
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.