Image Image Image Image Image
Scroll to Top

To Top

avril 2015 - François Koessler

Javascript et les API Google Maps et Bing Maps

Dans ce premier article du blog, je vous présente un exemple de travail avec Javascript et les API de Google Maps et Bing Maps. L’idée étant de vous familiariser avec les méthodes basiques de ces API respectives, bien pratiques dès qu’on a besoin de travailler avec des cartes dynamiques sur le web.

Pour la petite histoire, l’opération en question a été réalisée sur le site WordPress MyChinaRoots visité par de nombreux chinois et fonctionnant avec le thème Navigator dont la carte Google est un élément central. Problématique étant donné que les services Google sont bloqués en Chine, les internautes chinois attendant vainement le chargement de la page.

Passons maintenant à l’aspect technique : En inspectant le fichier index.php à la racine du thème, nous remarquons qu’il charge le template part-map_index.php. Celui-ci instancie la carte Google, crée les marqueurs, etc à l’aide de l’excellente librairie GMap3 pour l’interface avec l’API de Google Maps. Nous allons modifier le fichier index.php et charger un template alternatif part-bing_maps_index.php qui utilisera Bing Maps au lieu de Google Maps pour les internautes en provenance de Chine. Notez la dépendance au plugin PepakIpToCountry pour déterminer le pays en fonction de l’adresse IP mais vous êtes libres d’utiliser la librairie de votre choix.

Vous l’avez compris, il vous reste maintenant à implémenter le template part-bing_maps_index.php. Le but n’étant pas de divulguer le code du thème commercial Navigator, je ne présenterai ici que les bouts de code spécifiques utilisant les API Google et Bing Maps.

 

Création de la carte

Google Maps

Bing Maps

Résultat

Initialisation de la carte

Initialisation de la carte

Initialisation de la carte

Initialisation de la carte

 

Tracer les contours de la Chine

 

Google Maps

Bing Maps

 

Résultat

Tracé du contour de la China

Tracé du contour de la China

Tracé du contour de la China

Tracé du contour de la China

 

Ajouter des marqueurs

 

Google Maps

Bing Maps

 

Résultat

Ajout des marqueurs

Ajout des marqueurs

Ajout des marqueurs

Ajout des marqueurs

 

Tracer les polylines

 

Les polylines à dessiner sont enregistrées dans le tableau path_array.

Google Maps

Bing Maps

Résultat

Tracé des polylines

Tracé des polylines

Tracé des polylines

Tracé des polylines

 

Contrôler le zoom

 

Google Maps

Bing Maps

 

Changer le type de terrain de la carte

 

Google Maps

Bing Maps

 


 

En espérant que ces petits bouts de codes pourront vous êtes utiles, je vous souhaite un bon développement !