Nous le savons, Google Maps va rendre son API payante. Afin de palier au manque et aux erreurs que ce dernier risque de générer sur nos sites, je propose l’installation de cartes interactives par Bing Maps.

Bing Maps

Création d'une clé API chez Bing

  • Se rendre sur : https://www.bingmapsportal.com/Announcement?redirect=True et créé un compte (sinon se connecter).
  • Aller dans « My Account » et dans « My Keys ».
  • Créer une nouvelle clé, en saisissant le nom donné (par ex : « Bin Maps ») et laisser tout le reste.
  • Un tableau sera créé et vous pourrez récupérer la clé (« Key »).

Ajouter une Bing Maps sur Prestashop

Il faudrait insérer le code suivant dans un .tpl (code testé sur 1.5.6) :

{literal}
<script type='text/javascript'>
var map;
function GetMap(){
map = new Microsoft.Maps.Map('#maps', {
zoom: 11,
center : new Microsoft.Maps.Location({/literal}{Configuration::get(PS_STORES_CENTER_LAT)}{literal},{/literal}{Configuration::get(PS_STORES_CENTER_LONG)}{literal}),
mapTypeId: Microsoft.Maps.MapTypeId.ROADMAP
});
//Add pushpin - marker on Google Maps ;)
var marker = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var center = map.getCenter();
var infobox = new Microsoft.Maps.Infobox(center, {
title: '{/literal}{Configuration::get(PS_SHOP_NAME)}{literal}', description: '{/literal}{Configuration::get(PS_SHOP_ADDR1)} {Configuration::get(PS_SHOP_CODE)} {Configuration::get(PS_SHOP_CITY)}{literal}', visible: false
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(marker, 'click', function () {infobox.setOptions({ visible: true });});
map.entities.push(marker);
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&setLang=fr&setMkt=fr-FR&key=AtpfojHMDMKYQtK4yfwB-Mxfe4QtkTrZEap3CdFokZjnyddaeM-Zm9IAjvfFsJzN' async defer></script>
{/literal}

Pour améliorer le code, il existe les librairies de codes de Bing : 

Ajouter une Bing Maps sur WordPress

  1. Pour se faire, je me suis inspirée d’un article du site : WP Beginner
  2. J’ai installé le plugin Leaflet Maps Marker. Même si l’interface est un peu obsolète, il permet toutefois de générer notre carte intéractive.
  3. Dans Maps Marker > Réglages
    1. Itinéraires : Il faut choisir « Utiliser le fournisseur suivant pour les itinéraires » : Bing Maps (monde)
    2. Cartes de base : Pour « Carte de base par défaut » choisir Carte Bing (route).
    3. Cartes de base : Dans « Carte Bing » à gauche, il faut rentrer la Clé d’API Bing créer précédemment.
  4. Puis « Ajouter un nouveau marqueur » : Vous pourrez donner un nom à l’adresse (Choisissez le nom de l’entreprise, par exemple), puis saisir l’adresse, les dimensions (à gauche, on peut mettre le width en %..; c’est génial!), le picto du marqueur, le texte de l’info-bulle (mettre le numéro de téléphone, l’e-mail, par exemple), etc…
  5. Puis après avoir « Publier » la carte, vous aurez un shortcode à copier/coller.
  6. Rendez-vous dans Apparence > Widgets : Dans la zone de widget souhaitée, mettre le widget Texte et coller votre shortcode dedans, sans titre.

Laisser un commentaire

Fermer le menu
×

Panier