Mise en place de Angular Google Maps

angularjs_logo

Dans cet article, je vous démontrerai que l'intégration d'une Google Maps dans votre site web peut être facilitée grâce à l'utilisation d'AngularJS. En effet, intégrer une carte dans un site web peut avoir plusieurs intérêts : retracer un parcours, afficher les points de vente d'une enseigne... Cela implique donc que cette fonctionnalité est de plus en plus demandée, alors autant utiliser une méthode simple et efficace.

Configuration

Tout d’abord il faut intégrer Angular Google Maps à votre application, de la même façon que vous intégreriez n’importe quel autre module AngularJs.


angular.module('app', ['uiGmapgoogle-maps'])
.config(['uiGmapGoogleMapApiProvider', function(uiGmapGoogleMapApiProvider) {
	uiGmapGoogleMapApiProvider.configure({
		key: "key", //Clé pour utiliser l'API
		v: '3.17', //Par défaut la version la plus récente disponible
		libraries: 'geometry,visualization' //Librairies supplémentaires
	});
}]) ;

La clé n'est pas obligatoire pour utiliser l'API, mais si aucune clé n'est renseignée, il y a un quota de requêtes à ne pas dépasser.

Les librairies disponibles sont:
drawing : met à disposition une interface permettant à l'utilisateur de dessiner des polygones, rectangles, lignes, cercles ect...
geometry : permet de calculer les distances ou les aires
places : permet de rechercher un lieu en particulier sur la carte
visualization : affiche une représentation graphique des données (température, historique des séismes...)

Utilisation

Exemple simple

Html d'affichage de la carte

<ui-gmap-google-map center='map.center' zoom='map.zoom'>                             
   <ui-gmap-markers click="clickMarker" icon="'icon'" models="markers" coords="'coord'">
   </ui-gmap-markers>
</ui-gmap-google-map>

<!-- Les ' ' de icon="'icon'" et coords="'coord'" sont importants car s'ils sont omis, on lit le contenu de la variable coord, et non pas le champs coord de l’élément. -->
//Initialisation des variables
$scope.map = {
   center: {
	latitude: 46.5132, //Position initial de la carte
	longitude: 0.1033
   },
   zoom: 11 // de 0 à 19, 0 étant la valeur de zoom la plus forte
};

$scope.markers = [{
   coord: {
      latitude: 44.93, //Coordonnées où placer le point
      longitude: 4.89
   },
   email: "netapsys@netapsys.fr", //Propriété métier, pour les afficher à l'utilisateur lorsqu'il sélectionne le point par exemple
   icon: "https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png", //Icone personnalisée
   id: 412
},{
   coord: {
      latitude: 46.5132,
      longitude: 0.1033
   },
   email: "netapsys@netapsys.fr",
   icon: "//developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", //Icone personnalisée
   id: 413
}];

$scope.clickMarker = function(marker) {
   alert(marker.email); //Affichera l'email du point sur lequel on a cliqué
};

Ce qui affichera une carte équivalente à celle ci, et un message d'alerte lors du clic sur un des points, affichant l'email du point.

GMap_basique

Exemple avec popup d'information

Il est également possible d'afficher l'information directement sur la carte à l'aide du HTML suivant. Cela permet par exemple d'afficher les informations d'un restaurant (horaires, lien vers le site, une note de qualité, ect...).

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
   <ui-gmap-marker ng-repeat="marker in markers" idKey="marker.id" coords="marker.coord">
      <ui-gmap-window show="marker.show" ng-cloak closeClick="!marker.show">
         <div ng-controller="GmapCtrl">
            <p>{{marker.email}}
         </div>
      </ui-gmap-window>
  </ui-gmap-markers>
</ui-gmap-google-map>

Ce qui donne le rendu suivant en cliquant sur le point:

GMap_popup

La référence vers GmapCtrl n'est pas obligatoire, cependant chaque point de la carte a son propre environnement (scope). Si vous désirez faire des traitements complexes sur les données, il vous faudra donc le définir. A noter qu'il y aura un controller instancié par point de la carte, il est donc nécessaire de minimiser le temps d'initialisation du controller.

L’apparence de la fenêtre est bien sûr modifiable en utilisant du CSS, et l'API est très complète. Elle répondra très certainement à toutes les contraintes que ce soit en termes de performance ou de visuel.

Cet article ne présente qu'une partie des nombreuses fonctionnalités offertes par cette directive AngularJs. Il est aussi possible de tracer des itinéraires, afficher des informations bien plus complexe graphiquement, rechercher des lieux et bien plus encore. Peu importe ce que vous voulez faire avec la carte, il y a certainement une fonctionnalité déjà prévue qui vous y aidera!

La documentation complète est disponible ici: http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi

Un commentaire

  1. Bonjour,
    Après avoir installé « angular-google-maps » via la ligne de commande : « bower install angular-google-maps -S » et testé votre code en y ajoutant le script : , j’ai testé votre code. Or rien ne s’affiche.
    Serait-il possible d’avoir le code dans son intégralité ?
    Je vous en remercie par avance.
    Bien cordialement

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.