Creating an App Based On Google Maps, Part 2: Setting up the Map View

So you’ve got your API key in hand and you’re ready to develop an app.  What’s next?  We’ll we’ve got to get a Google Map displayed on the screen.  This will serve as the base layer for the UI of our map.  On top of that, we can plot points, squares, unicorns, or whatever we desire.
 

Step 3: Display Map

To do this, we’re going to edit two files: main.xml and main.java (or whatever you decided to call your initial activity).  Here are the changes we’re going to make:

Main.xml:

• We’re going to embed a MapView in our default Linear Layout giving us an XML file that looks like this (Enable JavaScript if the markup below looks funky):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<com.google.android.maps.MapView
                android:id="@+id/map" android:apiKey="0kB4hUUi6qkMYJcYJDYBtHKj-ZqmwiQvZTji0Rg"
                android:layout_width="fill_parent" android:layout_height="fill_parent"
                android:clickable="true" />
</LinearLayout>

com.google.android.maps.MapView links your XML layout to Google’s MapView api.  Feel free to tweak the values in your XML file as needed.  In addition, you can include even more in there.  For one application I’ve embedded a custom drawer over the map view, so the possibilities are endless.

Main.java

In the Main.java file we’ve got more work to do.  We have to initialize the map, set some of its parameters, and display it to the screen.  That is done with the following code:

package com.android.droidwebMapApplication;

import java.util.List;

import android.os.Bundle;

import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;

public class main extends MapActivity {
        // Map Object
        private MapView map;
        // Map Controller; Lets us plug in to map actions such as zooming, panning,
        // etc
        private MapController controller;
        // For later use in adding overlays to the Map; something you will surely
        // want to do
        List<Overlay> overlays;

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                // invoke our map as prescribed in the XML file
                setContentView(R.layout.main);
                // start the map
                initMapView();
                // Optional method for doing stuff once the phone figures out where the
                // user is on the map
                // initMyLocation();
        }

        @Override
        protected boolean isRouteDisplayed() {
                // Not used here, but can be used when directions are involved
                return false;
        }

        private void initMapView() {
                // Here's the map
                map = (MapView) findViewById(R.id.map);
                // Handle for the map controller
                controller = map.getController();
                // Nah... I dont want satellite view for this example
                map.setSatellite(false);
                // But I do want street view
                map.setStreetView(true);
                // I want to be able to zoom in and out
                map.setBuiltInZoomControls(true);
        }

}

Check the comments next to a given line of code the determine what it does. Now before you run this code, there’s one more thing you need to do. You’ve got to fix some settings in the AndroidManifest.xml file. In that file you need to:

• Add Internet permissions (where else are you going to get your Google Maps tiles from?)
• Inform the activity that you’re using the Google Maps library
• Enable the Access Location permission

This is a sample Manifest.xml file that I’m using:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.android.droidwebMapApplication" android:versionCode="1"
        android:versionName="1.0">
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.INTERNET" />
        <application android:icon="@drawable/icon" android:label="@string/app_name">
                <uses-library android:name="com.google.android.maps" />
                <activity android:name=".main" android:label="@string/app_name">
                        <intent-filter>
                                <action android:name="android.intent.action.MAIN" />
                                <category android:name="android.intent.category.LAUNCHER" />
                        </intent-filter>
                </activity>

        </application>
        <uses-sdk android:minSdkVersion="4" />

</manifest> 

After these changes, run the code, you should get a Google Map view of the Western Hemisphere. This concludes part two of the Google Maps tutorial. In later parts we’ll assume you have this framework already working and I’ll show you some code snippets of code that allow you to customize and build on top of this Google Maps view.
 

Result

Are there any other tutorials you’d like to see? Let us know!