Outline

• More Maps
• Quiz
• Event more maps

Introduction

• Last week, we started talking about Maps for HTML 5 and iPhone
• Today, we give a small app to draw a map natively on Android.

Introduction

• Maps can be created on Android using the Google Maps library.
• This is not a standard part of the Android library.
• To start you have to download this Google APIs for Android SDK
• In Eclipse go to Window > Android SDK Manager.
• The SDK Google APIs by Google Inc. may or may not appear. If it doesn't appear you might need to upgrade stuff, then relaunch the SDK Manager.
• When it does appear, you check it to install it.

AndroidManifest.xml

• Maps can be created on Android using the Google Maps library.
• This is not a standard part of the Android library.
• We will go over this library by looking at the Google's HelloMapActivity example.
• As this API isn't by default part of Android, and since it uses the internet we need to add the following lines to the AndroidManifest.xml file:

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

• We would also like our activity to not have a toolbar so that there is more room for the map. SO we add as well:
  

  <activity android:name=".HelloMap" android:label="@string/app_name"
       android:theme="@android:style/Theme.NoTitleBar">
  

main.xml

The main layout for our app is pretty simple:

<com.google.android.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mapview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:clickable="true"
    android:apiKey="Your Maps API Key goes here"
/>

Getting a maps API key

• To get a key you need to find your debug keystore.
• In Eclipse you can go to:
  Prefs > Android > Build
• Next you need to run the following keytool command (this assumes that keytool is in your command line path):

  keytool -list -alias androiddebugkey \
  -keystore ~/.android/debug.keystore \
  -storepass android -keypass android
  

  Replace in the above your path to debug.keystore
• This will print out an MD5 certificate fingerprint, whcih looks something like the following (note this example won't work):
  B3:9C:15:59:A6:60:73:6B:4B:F8:80:2C:6A:98:1A:42
• Next you go to: https://developers.google.com/android/maps-api-signup to sign up for a Google Maps API key.

MapActivity

• We next open up HelloMapActivity.java and edit it as follows:

  import com.google.android.maps.MapActivity;
  import com.google.android.maps.MapView;
  import android.os.Bundle;
  
  public class HelloMapActivity extends MapActivity 
  {
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
          MapView mapView = (MapView) findViewById(R.id.mapview);
          mapView.setBuiltInZoomControls(true);
      }
  
      @Override
      protected boolean isRouteDisplayed() {
          return false;
      }
  }
  

• isRouteDisplayed is required by every map activity.
• So far we would have a world map.

Quiz

Map Markers and Overlays

• Next we make a new class that HelloItemizedOverlay extends com.google.android.maps.ItemizedOverlay

  
  public class HelloItemizedOverlay extends ItemizedOverlay
  {
      private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
      private Context mContext;
  
      public HelloItemizedOverlay(Drawable defaultMarker, Context context) {
           //this sets the center point of the marker at its bottom.
           super(boundCenterBottom(defaultMarker));
  
           //save so can use to handle touch events
           mContext = context;
      }
  
      // this method is used to add overlays to our array list
      public void addOverlay(OverlayItem overlay) {
          mOverlays.add(overlay);
          populate(); // used to read each overlay item and prepare for drawing
      }
  
      // this method is called by populate
      // needs to correctly get the overlay from our array list
      @Override
      protected OverlayItem createItem(int i) {
         return mOverlays.get(i);
      }
  
      // need to correctly say the size of our array list
      @Override
      public int size() {
          return mOverlays.size();
      }
  
      // now we set up an Alert to display if the overlay is tapped.
      @Override
      protected boolean onTap(int index) {
          OverlayItem item = mOverlays.get(index);
          AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);
          dialog.setTitle(item.getTitle());
          dialog.setMessage(item.getSnippet());
          dialog.show();
          return true;
      }
  }
  

Using the Overlay on a Map

• To use the overlay in a map, we add the following to onCreate:

  List<Overlay> mapOverlays = mapView.getOverlays();
  Drawable drawable = this.getResources().getDrawable(R.drawable.androidmarker);
  HelloItemizedOverlay itemizedoverlay = new HelloItemizedOverlay(drawable, this);
  
  //next we create a marker and add it to our itemizedoverlay object
  GeoPoint point = new GeoPoint(19240000,-99120000);
  OverlayItem overlayitem = new OverlayItem(point, "Hello World", "Mexico City");
  itemizedoverlay.addOverlay(overlayitem);
  GeoPoint point2 = new GeoPoint(35410000, 139460000);
  OverlayItem overlayitem2 = new OverlayItem(point2, "Sekai, konichiwa!", "I'm in Japan!");
  itemizedoverlay.addOverlay(overlayitem2);
  
  mapOverlays.add(itemizedoverlay);
  
  

• Here we are assuming we took a png file named androidmarker.png and dragged it into our project under res/drawable.
• GeoPoints are computed in microdegrees.

Miscellaneous

• MapView's have setSatellite(flag); and setStreetView(flag); methods for selecting the kind of map
• To set the coordinates of the map you can do things like:

  controller = mapView.getController();
  String coordinates[] = {"1.5", "103.6"};
  double latitude = Double.parseDouble(coordinates[0]);
  double longitude = Double.parseDouble(coordinates[1]);
   
  GeoPoint p = new GeoPoint((int) (latitude * 1E6), (int) (longitude * 1E6));
  controller.animateTo(p);
  controller.setZoom(17); 
  mapView.invalidate();