Introduction and Overview

The MapView class allows android devices to display Google Maps inside of an application. Just like any other view, a MapView can be included in the layout of an activity either programatically on in the XML layout.

Note: While writing this tutorial I found that Google recently published a similar tutorial that can be found at http://developer.android.com/guide/tutorials/views/hello-mapview.html. The beginnings of both tutorials are very similar, however the later sections cover different methods for generating overlays.

To utilize Google's mapping API it is necessary to obtain an API key. To get an API key visit http://code.google.com/android/maps-api-signup.html and enter your certificate fingerprint (The link explains how to generate one).

Finally, to make everything work, you need to add the following code to your AndroidManifest under the <application> tag for your app.

<uses-library android:name="com.google.android.maps" />

Displaying a basic map

The following XML creates a MapView. Replace put-your-apikey-here with the API key that you signed up for in the previous section.

  <com.google.android.maps.MapView
    android:id="@+id/map"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:enabled="true"
    android:clickable="true"
    android:apiKey="put-your-apikey-here"
  />

You can also create a MapView programatically in your activity class using the following code, but the remainder of this tutorial will assume that the MapView was created in XML. Again, replace put-your-apikey-here with your API key.

   1 myMapView = new MapView(this, "put-your-apikey-here");

The activity that contains your MapView should extend MapActivity rather than simply extending Activity.

At this point you will have a map that you can pan by touching and dragging. It lacks any zoom or address lookup capabilities at present.

Controlling the map

Once you have created a MapView, pou can access the it from the MapActivity using the following code.

   1 gMap = (MapView) findViewById(R.id.map);

To control our newly created MapView, we must instance and attach a MapController. This is done in the following code.

   1 MapController mc;
   2 mc = gMap.getController();

Now that we have the MapController for gMap we can (surprise!) control the map. Primarily, this means controlling where the map is centered, and how zoomed in it is. To set center of the map, we need to create a GeoPoint. A GeoPoint simply stores the latitude and longitude of a location. The following code creates a GeoPoint. For details about GeoPoints, see the References section.

   1 String coordinates[] = {"40.747778", "-73.985556"};
   2 double lat = Double.parseDouble(coordinates[0]);
   3 double lng = Double.parseDouble(coordinates[1]);
   4 
   5 GeoPoint c = new GeoPoint((int)(lat*1E6),(int)(lng*1E6));

To pan the map to this position use the MapController.

   1 mc.animateTo(c);

Once the MapView was centered on the correct position the MapController can also set the zoom level.

   1 mc.setZoom(8)

You can also set the zoom such that two GeoPoints could be visible, provided the map is panned to the correct location. The following code accomplishes this for GeoPoints p and c, and the example [/projects/mobapp/browser/jgetto/Assignment3/src/edu/olin/Assignment3/Assignment3.java GeoHash] contains a method named midpoint, which accepts two GeoPoints and returns a GeoPoint located halfway between the two, allowing the map to be panned to the correct location.

   1 mc.zoomToSpan((p.getLatitudeE6()-c.getLatitudeE6())+1000000,( p.getLongitudeE6()-c.getLongitudeE6())+1000000);

Overlays

Overlays allow you to put images, text, lines, shapes or pretty much anything else on a map.

Google's tutorial describes adding an image, or "drawable" file and to the map. This tutorial, however, will describe how to add overlays created from scratch.

First, we need to create a new class that extends Overlay. This class should contain a draw method, which contains the code that actually draws the overlay.

   1 public void draw(Canvas canvas, MapView mapView, boolean shadow) {
   2         super.draw(canvas, mapView, shadow);
   3 }

The part that makes this all work is the projection. A projection allows GeoPoints to be mapped to pixels on the screen, so that the overlays can be tied to geographic locations. The following code projects the GeoPoint gpt onto point, which is an actual location on the screen.

   1 Projection projection = mapView.getProjection();
   2 Point point = new Point();
   3 
   4 projection.toPixels(gpt, point);

Finally, by invoking methods on canvas, you can create your overlay. For example, the following code draws a circle, 9 pixels in radius, with a color defined by the Paint paint1 centered at point.

   1 canvas.drawCircle(point.x, point.y, 9, paint1);

I'm not going to go into the details of Android's canvas methods since there are a bunch, and most of them are pretty self explanatory. For details about !Canvas, see the References section.

Once we have the overlay created, the only thing remaining is the simple matter of adding it to the MapView. To do this, we go back to our activity that extends MapActivity. In the following code gMap is the MapView that we created at the beginning of this tutorial, and myOverlay is an instance of our new class that extends overlay. Note that in this case, MyOverlay's constructor accepts two GeoPoints but yours might accept something different, or nothing at all.

   1         List<Overlay> overlays = gMap.getOverlays();        
   2         MyOverlay myOverlay = new MyOverlay(p,c);
   3         overlays.add(myOverlay);

References

License

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

CategoryTutorial

FrontPage/Tutorials/Map View