Petite intégration de l'api Google Map au sein d'un projet GWT

Nous allons voir comment afficher une simple carte dans un projet GWT grâce à l'api Google Map.

1) Ajout de la librairie Google Map au projet

Dans un premier temps, il faut inclure le code suivant au sein de la page HTML qui affichera la carte :

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2) Création d'une classe java pour initialiser la carte

Dans un second temps nous allons initialiser notre carte au d'une méthode JSNI (JavaScript Native Interface). JSNI permet d'écrire des fonctions en javascript à l'intérieur d'une classe Java. En gros ça nous permet de coder en javascript au sein de notre projet GWT, et ça ben c'est bien pratique.

Rappel : Pour déclarer une méthode JSNI, il faut déclarer la méthode avec le mot clé native, et elle doit commencer par /*-{ et finir par }-*/;

Premièrement je crée une classe Gmap dans laquelle je vais écrire ma méthode JSNI permettant d'initialiser notre carte.

Je ne vais pas rentrer dans les détails de ce code, sachez juste qu'il sert à initialiser une carte ayant les coordonnées (48.94, 2.49). Si vous observez bien la dernière instruction on remarque que la carte sera ajouté sur la page html a l'élément ayant pour id : map. Pour l'instant nous n'avons aucun composant ayant pour id map au sein de notre page html. Il va donc falloir le créer.

3) Ajout de la carte sur la page html

Nous allons tout d'abord créer une div ayant pour id "map" au sein de notre page html. On comprend donc que la carte sera ajoutée à cette div lorsque nous appellerons la méthode initMap de la classe Gmap.

Pour initialiser la carte il vous suffit d'appeler l'instruction suivante Gmap.initMap() dans votre module GWT.

Compilez et déployez votre projet, vous obtiendrez le résultat suivant :

Une alternative consiste à créer l'élément html d'id "map" au sein de notre module GWT et non pas dans la page HTML. Pour cela supprimer la ligne suivante dans votre page html <div id="map" style="width: 300px;height: 300px;"></div>
Nous allons créer un panneau HTML d'id "map" et ensuite initialiser notre carte :

L

Au final on obtient exactement le même résultat. Libre choix au développeur de d'opter pour la meilleure formule !!