Dear readers am back after a long time trying to complete what i started a few months back. This article is part 5 of the previous series but it doesn’t depend on the code of the previous articles, still they can be referenced to get a better understanding of configuring Google Maps for Android and learning the basic development of Google Maps for Android. The development environment stays the same as of the previous articles. No change in any of the configurations etc.

Please see the links for previous articles for basics of Google Maps for Android.

  1. http://mirnauman.wordpress.com/2012/01/30/using-google-maps-in-android-development-tutorial-part-1/
  2. http://mirnauman.wordpress.com/2012/02/07/using-gps-in-android-and-animating-google-maps-to-the-current-gps-location-android-tutorial-part-2/
  3. http://mirnauman.wordpress.com/2012/02/13/adding-image-to-googlemaps-using-map-overlays-android-tutorial-part-3/
  4. http://mirnauman.wordpress.com/2012/02/14/android-google-maps-tutorial-part-4-adding-menu-some-additional-functionality-like-zooming-changing-map-view-animating-to-gps-current-location-using-menu-button/

Objective of this article is to add multiple images to our Google Map Application for Android. I have taken a scenario where I have a list of coordinates  of different cities of Pakistan and I want display an image on each city. Check the final output of this article so that you have an idea of what we will achieve at the end of this tutorial.

Multiple Images Displayed on our Android Google Maps Application.

Starting with the actual work,  inside the main GoogleMapsAppActivity Class that  extends MapActivity, add a Class lets say MirItemizedClass that extends ItemizedOverlay.  This is a  base class for an Overlay which consists of a list of OverlayItems. This handles sorting north-to-south for drawing, creating span bounds, drawing a marker for each point, and maintaining a focused item. It also matches screen-taps to items, and dispatches Focus-change events to an optional listener.


private class MirItemizedOverlay extends ItemizedOverlay {

 private List<OverlayItem> mOverlays = new ArrayList();

 public MirItemizedOverlay(Drawable defaultMarker) {
 super(boundCenterBottom(defaultMarker));
 // TODO Auto-generated constructor stub
 }

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

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

 public void addOverlayItem(OverlayItem overlayItem) {
 mOverlays.add(overlayItem);
 populate();
 }

 }

We have to set the bounding rectangle of the drawable  that we add to our ItemizedOverlay. The defaultMarker is a Drawable that is drawn on every OverlayItem that we add to our ItemizedOverlay. To do this we have to use boundCenterBottom or boundCenter or we can use the setBounds method to get the job done. So we have used boundCenterBottom(defaultMaker).  To add multiple overlays we have added a List of OverlayItem and used that in the createItem and size methods of our ItemizedOverlay Class. To add the OverlayItems to our internal list we have added the method addOverlayItem(OverlayItem overlayItem).

Now we will use the functionality of MirItemizedOverlay Class in the onCeate method of our main GoogleMapsAppActivity Class.

We will create instances of Drawable and MirItemizedOverlay to retrieve the image from our res/drawable folder and to supply that image to the our ItemizedOverlay Class.


Drawable makerDefault = this.getResources().getDrawable(R.drawable.star_big_on);
 MirItemizedOverlay itemizedOverlay = new MirItemizedOverlay(makerDefault);
 GeoPoint point = new GeoPoint(33480000, 73000000);

We have also ceated a GeoPoint object with a latitude, longitude value.  Add another method  to our MirItemizedOverlay Class that will take two integers and a string as parameters.


public void addOverlayItem(int lat, int lon, String title) {
 GeoPoint point = new GeoPoint(lat, lon);
 OverlayItem overlayItem = new OverlayItem(point, title, null);
 addOverlayItem(overlayItem);
 }

The code to create and add multiple locations to our itemizedOverlay object by using the recently created method is


OverlayItem overlayItem = new OverlayItem(point, "Islamabad", null);
 itemizedOverlay.addOverlayItem(33695043, 73000000, "Islamabad");
 itemizedOverlay.addOverlayItem(33480000, 73000000, "Some Other Pakistani City");
 itemizedOverlay.addOverlayItem(33380000, 73000000, "Some Other Pakistani City");

Now enable the mapView control to display the itemizedOverlay


mapView.getOverlays().add(itemizedOverlay);

Now tweek the mapView to get focused at a certain point and set the zooming level.


MapController mc = mapView.getController();
 mc.setCenter(new GeoPoint(33580000, 73000000)); // Some where near Islamabad.
 mc.zoomToSpan(itemizedOverlay.getLatSpanE6(), itemizedOverlay.getLonSpanE6());

Run the project we will get the output in the picture given above.

Complete Code of this tutorial.


package com.android.googlemapsapp;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import com.google.android.maps.GeoPoint;
import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.OverlayItem;

import android.os.Bundle;

&nbsp;

public class GoogleMapsAppActivity extends MapActivity {

 private MapView mapView;
 private MapController mc;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 mapView = (MapView) findViewById(R.id.mapview1);
 mc = mapView.getController();
 mapView.setBuiltInZoomControls(true);

 Drawable makerDefault = this.getResources().getDrawable(R.drawable.star_big_on);
 MirItemizedOverlay itemizedOverlay = new MirItemizedOverlay(makerDefault);
 GeoPoint point = new GeoPoint(33480000, 73000000);

 OverlayItem overlayItem = new OverlayItem(point, "Islamabad", null);
 itemizedOverlay.addOverlayItem(33695043, 73000000, "Islamabad");
 itemizedOverlay.addOverlayItem(33480000, 73000000, "Some Other Pakistani City");
 itemizedOverlay.addOverlayItem(33380000, 73000000, "Some Other Pakistani City");

 mapView.getOverlays().add(itemizedOverlay);

 MapController mc = mapView.getController();
 mc.setCenter(new GeoPoint(33580000, 73000000)); // Some where near Islamabad.
 mc.zoomToSpan(itemizedOverlay.getLatSpanE6(), itemizedOverlay.getLonSpanE6());

}

@Override
 protected boolean isRouteDisplayed() {
 // TODO Auto-generated method stub
 return false;
 }

 private class MirItemizedOverlay extends ItemizedOverlay {

 private List<OverlayItem> mOverlays = new ArrayList<OverlayItem>();

 public MirItemizedOverlay(Drawable defaultMarker) {
 super(boundCenterBottom(defaultMarker));
 // TODO Auto-generated constructor stub
 }
 @Override
 protected OverlayItem createItem(int i) {
 return mOverlays.get(i);
 }

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

 public void addOverlayItem(OverlayItem overlayItem) {
 mOverlays.add(overlayItem);
 populate();
 }

 public void addOverlayItem(int lat, int lon, String title) {
 GeoPoint point = new GeoPoint(lat, lon);
 OverlayItem overlayItem = new OverlayItem(point, title, null);
 addOverlayItem(overlayItem);
 }
 }

}
Related articles
About these ads