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.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 SimpleOverlay extends ItemizedOverlay<OverlayItem> {
 private final ArrayList<OverlayItem> overlays = new ArrayList<OverlayItem>();
 private final Context context;

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

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

 public void addOverlay(OverlayItem overlay) {
  this.overlays.add(overlay);
  populate();
 }

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

 @Override
 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);
  dialog.setTitle(item.getTitle());
  dialog.setMessage(item.getSnippet());
  dialog.show();
  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.graphics.drawable.Drawable;
import android.os.Bundle;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

public class MapsActivity extends MapActivity {

 private MapView mapView;

 @Override
 protected void onCreate(Bundle bundle) {
  super.onCreate(bundle);

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

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

  //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);
  simpleOverlay.addOverlay(overlayitem);
  
  //add this overlay to the list of overlays of the map
  final List<Overlay> mapOverlays = this.mapView.getOverlays();
  mapOverlays.add(simpleOverlay);
 }

 @Override
 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

    ReplyDelete