Wednesday, 2 May 2012

Add Google Map to your App - Part 2

On the previous post, we saw how to add a Google Map to your App.

Now let's see how you can draw markers on this map and display a custom dialog when you tap on it.

First you have to create a class that will inherit from ItemizedOverlay, this class will manage the list of markers and their tap events.
Each map can contain several overlays. You can for example create a specific overlay to display museums location and another one for restaurants location.
Let's see an example of a simple overlay:

package com.fordemobile.brightstars;

import java.util.ArrayList;

import android.content.Context;


public class SimpleOverlay extends ItemizedOverlay<OverlayItem> {
 private final ArrayList<OverlayItem> overlays = new ArrayList<OverlayItem>();
 private final Context context;

 public SimpleOverlay(Drawable defaultMarker, Context context) {
  // keep the context to use it for the dialog displayed on tap event
  this.context = context;

 protected OverlayItem createItem(int i) {
  return this.overlays.get(i);

 public void addOverlay(OverlayItem overlay) {

 public int size() {
  return this.overlays.size();

 protected boolean onTap(int index) {
  // display a dialog when you tap on it
  final OverlayItem item = this.overlays.get(index);
  final AlertDialog.Builder dialog = new AlertDialog.Builder(this.context);
  return true;


Now that you have created an overlay class, what you need to do is retrieve the map of your layout, create a marker, add this marker to an overlay and add this overlay to your map.
You will do all this on your map Activity :

package com.fordemobile.brightstars;

import java.util.List;

import android.os.Bundle;


public class MapsActivity extends MapActivity {

 private MapView mapView;

 protected void onCreate(Bundle bundle) {

  //retrieves the map fro mthe layout
  this.mapView = (MapView) findViewById(;
  //allow zoom in and zoom out features

  //create the image used for the market (we will display a star)
  final Drawable drawable = this.getResources().getDrawable(

  //create coordinates with latitude and longitude in microdegrees (degrees * 1E6).
  final GeoPoint point = new GeoPoint(19240000, -99120000);
  //create the marker at the created coordinates and give it a title and description
  final OverlayItem overlayitem = new OverlayItem(point, "Hola, Mundo!",
    "I'm in Mexico City!");
  //add the marker to the list
  final SimpleOverlay simpleOverlay = new SimpleOverlay(drawable, this);
  //add this overlay to the list of overlays of the map
  final List<Overlay> mapOverlays = this.mapView.getOverlays();

 protected boolean isRouteDisplayed() {
  return false;

Here is what you should obtain :

That's it for today!

On the last part of this tutorial, we will see how to draw custom polygons on a map.

1 comment:

  1. Apple's flagship operating system iOS 11 is nearing it's release. There will be quite a few changes from iOS 10 as well as some compatibility updates. You can check out my site to get all the details about iOS 11, the compatible devices, release date and iOS 11 release date