Afficher les marqueurs dans la carte Google Map sous Android

Nous allons voir dans ce tutoriel comment ajouter des points d’intérêts à votre Google Map. Avant tout vous devez déjà avoir implémenter une map au sein de votre application. Vous pouvez reprendre le projet “HelloGoogleMap” vue dans le tutoriel “Intégration d’une Google Map Sous Android”.

ItimizedOverlay

Vous allez tout d’abord créer une classe qui implémente la classe ItimizedOverlay, elle représenteras votre liste de point d’intérêt.

Vous devez spécifier :

• Le nom de votre classe.
• Dériver votre classe de com.google.android.maps.ItemizedOverlay (Champ superclass).
• Cocher la case “Constructors from superclass”.
• Enfin cliquer sur finish.

Dans notre classe nous allons créer une liste qui va nous permettre de stocker nos points d’intérêts :

private ArrayList<OverlayItem>  arrayListOverlayItem = new ArrayList<OverlayItem>();

Ce qui va nous donner la classe suivante :

package com.tuto.googlemap;

import java.util.ArrayList;

import android.app.AlertDialog;
import android.content.Context;
import android.graphics.drawable.Drawable;

import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.OverlayItem;

public class ListItimizedOverlay extends ItemizedOverlay<OverlayItem>
{

 private ArrayList<OverlayItem> arrayListOverlayItem = new ArrayList<OverlayItem>();

 public ListItimizedOverlay(Drawable defaultMarker)
 {
  super(boundCenterBottom(defaultMarker));
 }

 @Override
 protected OverlayItem createItem(int i)
 {
  return arrayListOverlayItem.get(i);
 }

 @Override
 public int size()
 {
  return arrayListOverlayItem.size();
 }

 public void addOverlayItem(OverlayItem overlay)
 {
  arrayListOverlayItem.add(overlay);
  populate();
 }

}

Passons à quelques explications :

• Tout d’abord votre constructeur reçoit en paramètre un Drawable : defaultMarker. Lors de la construction de votre objet ListItimizedOverlay, vous pouvez spécifier l’image qui représentera votre marqueur sur la carte.
• Toujours en ce qui concerne le constructeur, on remarque aussi l’appel à la méthode boundCenterBottom(defaultMarker) qui englobe le defaultMarker. Cette fonction permet de centrer l’image de votre marqueur juste au dessus du point cible.
• On ajoute une méthode addOverlayItem qui prends en paramètre des OverlayItem, ce qui nous permettras une fois l’objet créer de rajouter des points dans notre liste : arrayListOverlayItem.add(overlay).
• La fonction populate() ajoute les points sur la carte. Elle s’occupe de préparer les éléments à dessiner en appelant entre autre votre méthode creatItem.
• D’où la nécessiter de surcharger les méthodes createItem(int i) qui retourne un élément présent dans notre liste de point.
• Ma méthode size() indique le nombre d’élément présent dans notre liste.

Ajout du marqueur

Reprenons l’activité qui contient votre Google Map. Nous allons créer un objet de type ListItimizedOverlay qui va contenir nos points. Il va falloir choisir une image Drawable pour l’utiliser en paramètres à la création de notre instance. Pour finir ajouter des points de type GeoPoint avec les coordonnées ciblées.
Voici le code à rajouté à la fin de votre activité :

Drawable drawable = this.getResources().getDrawable(R.drawable.ic_launcher);
LisItimizedOverlay itemizedoverlay = new LisItimizedOverlay(drawable);

GeoPoint geoPoint = new GeoPoint(-17595983, -149487411);
OverlayItem overlayitem = new OverlayItem(geoPoint, "Hello from", "Tahiti");
itemizedoverlay.addOverlayItem(overlayitem);

Lorsque vous voulez ajouter un point à votre liste d’overlay, il faut d’abord créer les points à l’aide de la classe OverlayItem avec comme paramètres les coordonnées du point, un titre et un snippet.
Si vous souhaitez ajouter un autre point, il faut utiliser les lignes suivantes :

GeoPoint geoPoint2 = new GeoPoint(-17528941, -149826891);
OverlayItem overlayitem2 = new OverlayItem(geoPoint2, "Hello from", "Moorea");
itemizedoverlay.addOverlayItem(overlayitem2);

Une fois la liste de point créée, ajoutez les à votre carte. Pour cela, il faut récupérer la liste des points déjà existants (méthode getOverlays()) et y ajouter notre liste .

List<Overlay> mapOverlays = mapView.getOverlays();
mapOverlays.add(itemizedoverlay);

Vous pouvez dès a présent compiler votre projet et y ajouter autant de points que vous souhaitez.

Gestion du clique sur un marqueur

Si vous souhaitez ajouter une action au moment du clique sur un marqueur, une modification de la classe ListItimizedOverlay est nécessaire :

@Override
protected boolean onTap(int index)
{
 OverlayItem item = arrayListOverlayItem.get(index);
AlertDialog.Builder dialog = new AlertDialog.Builder(context);
dialog.setTitle(item.getTitle());
dialog.setMessage(item.getSnippet());
dialog.show();
return true;
}

Nous allons simplement créer un message d’alerte affichant les informations sur le point sélectionné.
Vous pouvez remarquer que l’utilisation d’un AlertDialog nécessite un contexte. Pour cela, nous allons surcharger le constructeur de notre classe afin de pouvoir lui passer un contexte en paramètre.

private Context context;

public LisItimizedOverlay(Drawable defaultMarker, Context pContext)
{
super(boundCenterBottom(defaultMarker));
this.context = pContext;
}

Enfin dans l’activité de votre map, appeler ce nouveau constructeur avec le paramètre this qui représentera notre contexte :

ListItimizedOverlay itemizedoverlay = new ListItimizedOverlay(drawable,this);

Conclusion

Voila ce tutoriel s’arrête ici en espérant qu’il vous a aidé à comprendre comment ajouter des points d’intérêt à votre google map. L’ensemble des sources du projet est disponible ici.