Google Maps is one of the many applications bundled with the Android platform. In addition to simply using the Maps application, you can also embed it into your own applications and make it do some very cool things. In this article, I will show you how to use Google Maps in your Android applications and how to programmatically perform the following:
- Change the views of Google Maps
- Obtain the latitude and longitude of locations in Google Maps
- Perform geocoding and reverse geocoding
- Add markers to Google Maps
Creating the Project
Using Eclipse, create a new Android project and name GoogleMaps as shown in Figure 1.
Figure 1 Creating a new Android project using Eclipse
Obtaining a Maps API key
Beginning with the Android SDK release v1.0, you need to apply for a free Google Maps API key before you can integrate Google Maps into your Android application. To apply for a key, you need to follow the series of steps outlined below. You can also refer to Google's detailed documentation on the process athttp://code.google.com/android/toolbox/apis/mapkey.html.
First, if you are testing the application on the Android emulator, locate the SDK debug certificate located in the default folder of "C:/Documents and Settings/<username>/Local Settings/Application Data/Android". The filename of the debug keystore is debug.keystore. For deploying to a real Android device, substitute thedebug.keystore file with your own keystore file. In a future article I will discuss how you can generate your own keystore file.
For simplicity, copy this file (debug.keystore) to a folder in C:/ (for example, create a folder called "C:/Android").
Using the debug keystore, you need to extract its MD5 fingerprint using the Keytool.exe application included with your JDK installation. This fingerprint is needed to apply for the free Google Maps key. You can usually find theKeytool.exe from the "C:/Program Files/Java/<JDK_version_number>/bin" folder.
Issue the following command (see also Figure 2) to extract the MD5 fingerprint.
keytool.exe -list -alias androiddebugkey -keystore "C:/android/debug.keystore" -storepass android -keypass android
Copy the MD5 certificate fingerprint and navigate your web browser to: http://code.google.com/android/maps-api-signup.html. Follow the instructions on the page to complete the application and obtain the Google Maps key.
Figure 2 Obtaining the MD5 fingerprint of the debug keystore
To use the Google Maps in your Android application, you need to modify your AndroidManifest.xml file by adding the <uses-library> element together with the INTERNET permission:
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><?xml</strong></span> <span style="color: rgb(0, 0, 102); ">version</span>=<span style="color: rgb(255, 0, 0); ">"1.0"</span> <span style="color: rgb(0, 0, 102); ">encoding</span>=<span style="color: rgb(255, 0, 0); ">"utf-8"</span><span style=" color: black; "><strong>?></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><manifest</strong></span> <span style="color: rgb(0, 0, 102); ">xmlns:android</span>=<span style="color: rgb(255, 0, 0); ">"http://schemas.android.com/apk/res/android"</span>
<span style="color: rgb(0, 0, 102); ">package</span>=<span style="color: rgb(255, 0, 0); ">"net.learn2develop.GoogleMaps"</span>
<span style="color: rgb(0, 0, 102); ">android:versionCode</span>=<span style="color: rgb(255, 0, 0); ">"1"</span>
<span style="color: rgb(0, 0, 102); ">android:versionName</span>=<span style="color: rgb(255, 0, 0); ">"1.0.0"</span><span style=" color: black; "><strong>></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><application</strong></span> <span style="color: rgb(0, 0, 102); ">android:icon</span>=<span style="color: rgb(255, 0, 0); ">"@drawable/icon"</span> <span style="color: rgb(0, 0, 102); ">android:label</span>=<span style="color: rgb(255, 0, 0); ">"@string/app_name"</span><span style=" color: black; "><strong>></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><uses-library</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">"com.google.android.maps"</span> <span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><activity</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">".MapsActivity"</span>
<span style="color: rgb(0, 0, 102); ">android:label</span>=<span style="color: rgb(255, 0, 0); ">"@string/app_name"</span><span style=" color: black; "><strong>></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><intent-filter></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><action</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">"android.intent.action.MAIN"</span> <span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><category</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">"android.intent.category.LAUNCHER"</span> <span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></intent-filter></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></activity></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></application></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><uses-permission</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">"android.permission.INTERNET"</span> <span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></manifest></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></xml></strong></span></span>
Displaying the Map
To display the Google Maps in your Android application, modify the main.xml file located in the res/layout folder. You shall use the <com.google.android.maps.MapView> element to display the Google Maps in your activity. In addition, let's use the <RelativeLayout> element to position the map within the activity:
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><?xml</strong></span> <span style="color: rgb(0, 0, 102); ">version</span>=<span style="color: rgb(255, 0, 0); ">"1.0"</span> <span style="color: rgb(0, 0, 102); ">encoding</span>=<span style="color: rgb(255, 0, 0); ">"utf-8"</span><span style=" color: black; "><strong>?></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><RelativeLayout</strong></span> <span style="color: rgb(0, 0, 102); ">xmlns:android</span>=<span style="color: rgb(255, 0, 0); ">"http://schemas.android.com/apk/res/android"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_width</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_height</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span><span style=" color: black; "><strong>></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><com</strong></span>.google.android.maps.MapView
<span style="color: rgb(0, 0, 102); ">android:id</span>=<span style="color: rgb(255, 0, 0); ">"@+id/mapView"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_width</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_height</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span>
<span style="color: rgb(0, 0, 102); ">android:enabled</span>=<span style="color: rgb(255, 0, 0); ">"true"</span>
<span style="color: rgb(0, 0, 102); ">android:clickable</span>=<span style="color: rgb(255, 0, 0); ">"true"</span>
<span style="color: rgb(0, 0, 102); ">android:apiKey</span>=<span style="color: rgb(255, 0, 0); ">"0l4sCTTyRmXTNo7k8DREHvEaLar2UmHGwnhZVHQ"</span>
<span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></RelativeLayout></strong></span></span>
Notice from above that I have used the Google Maps key that I obtained earlier and put it into the apiKey attribute.
In the MapsActivity.java file, modify the class to extend from the MapActivity class, instead of the normalActivity class:
<span style=" color: rgb(0, 0, 0); "><strong>package</strong></span> net.<span style="color: rgb(0, 102, 0); ">learn2develop</span>.<span style="color: rgb(0, 102, 0); ">GoogleMaps</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapActivity;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView;</span>
<span style="color: rgb(161, 161, 0); ">import android.os.Bundle;</span>
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapsActivity <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> MapActivity
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>/** Called when the activity is first created. */</em></span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">void</span> onCreate<span style="color: rgb(102, 204, 102); ">(</span>Bundle savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style=" color: rgb(0, 0, 0); "><strong>super</strong></span>.<span style="color: rgb(0, 102, 0); ">onCreate</span><span style="color: rgb(102, 204, 102); ">(</span>savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
setContentView<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">layout</span>.<span style="color: rgb(0, 102, 0); ">main</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>protected</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> isRouteDisplayed<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>false</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span>
Observe that if your class extends the MapActivity class, you need to override the isRouteDisplayed() method. You can simply do so by setting the method to return false.
That's it! That's all you need to do to display the Google Maps in your application. Press F11 in Eclipse to deploy the application onto an Android emulator. Figure 3 shows the Google map in all its glory.
Figure 3 Google Maps in your application
At this juncture, take note of a few troubleshooting details. If your program does not run (i.e. it crashes), then it is likely you forgot to put the following statement in your AndroidManifest.xml file:
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><uses-library</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">"com.google.android.maps"</span> <span style=" color: black; "><strong>/></strong></span></span>
If your application manages to load but you cannot see the map (all you see is a grid), then it is very likely you do not have a valid Map key, or that you did not specify the INTERNET permission:
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><uses-permission</strong></span> <span style="color: rgb(0, 0, 102); ">android:name</span>=<span style="color: rgb(255, 0, 0); ">"android.permission.INTERNET"</span> <span style=" color: black; "><strong>/></strong></span></span>
Displaying the Zoom View
The previous section showed how you can display the Google Maps in your Android device. You can drag the map to any desired location and it will be updated on the fly. However, observe that there is no way to zoom in or out from a particular location. Thus, in this section, you will learn how you can let users zoom into or out of the map.
First, add a <LinearLayout> element to the main.xml file as shown below:
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><?xml</strong></span> <span style="color: rgb(0, 0, 102); ">version</span>=<span style="color: rgb(255, 0, 0); ">"1.0"</span> <span style="color: rgb(0, 0, 102); ">encoding</span>=<span style="color: rgb(255, 0, 0); ">"utf-8"</span><span style=" color: black; "><strong>?></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><RelativeLayout</strong></span> <span style="color: rgb(0, 0, 102); ">xmlns:android</span>=<span style="color: rgb(255, 0, 0); ">"http://schemas.android.com/apk/res/android"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_width</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_height</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span><span style=" color: black; "><strong>></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><com</strong></span>.google.android.maps.MapView
<span style="color: rgb(0, 0, 102); ">android:id</span>=<span style="color: rgb(255, 0, 0); ">"@+id/mapView"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_width</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_height</span>=<span style="color: rgb(255, 0, 0); ">"fill_parent"</span>
<span style="color: rgb(0, 0, 102); ">android:enabled</span>=<span style="color: rgb(255, 0, 0); ">"true"</span>
<span style="color: rgb(0, 0, 102); ">android:clickable</span>=<span style="color: rgb(255, 0, 0); ">"true"</span>
<span style="color: rgb(0, 0, 102); ">android:apiKey</span>=<span style="color: rgb(255, 0, 0); ">"0l4sCTTyRmXTNo7k8DREHvEaLar2UmHGwnhZVHQ"</span>
<span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong><LinearLayout</strong></span> <span style="color: rgb(0, 0, 102); ">android:id</span>=<span style="color: rgb(255, 0, 0); ">"@+id/zoom"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_width</span>=<span style="color: rgb(255, 0, 0); ">"wrap_content"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_height</span>=<span style="color: rgb(255, 0, 0); ">"wrap_content"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_alignParentBottom</span>=<span style="color: rgb(255, 0, 0); ">"true"</span>
<span style="color: rgb(0, 0, 102); ">android:layout_centerHorizontal</span>=<span style="color: rgb(255, 0, 0); ">"true"</span>
<span style=" color: black; "><strong>/></strong></span></span>
<span style="color: rgb(0, 153, 0); "><span style=" color: black; "><strong></RelativeLayout></strong></span></span>
You will use the <LinearLayout> element to hold the two zoom controls in Google Maps (you will see this shortly).
In the MapsActivity.java file, add the following imports:
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView.LayoutParams; </span>
<span style="color: rgb(161, 161, 0); ">import android.view.View;</span>
<span style="color: rgb(161, 161, 0); ">import android.widget.LinearLayout;</span> and add the following code after the line setContentView(R.layout.main);
mapView = <span style="color: rgb(102, 204, 102); ">(</span>MapView<span style="color: rgb(102, 204, 102); ">)</span> findViewById<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">id</span>.<span style="color: rgb(0, 102, 0); ">mapView</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
LinearLayout zoomLayout = <span style="color: rgb(102, 204, 102); ">(</span>LinearLayout<span style="color: rgb(102, 204, 102); ">)</span>findViewById<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">id</span>.<span style="color: rgb(0, 102, 0); ">zoom</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>View</strong></span></a> zoomView = mapView.<span style="color: rgb(0, 102, 0); ">getZoomControls</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
zoomLayout.<span style="color: rgb(0, 102, 0); ">addView</span><span style="color: rgb(102, 204, 102); ">(</span>zoomView,
<span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> LinearLayout.<span style="color: rgb(0, 102, 0); ">LayoutParams</span><span style="color: rgb(102, 204, 102); ">(</span>
LayoutParams.<span style="color: rgb(0, 102, 0); ">WRAP_CONTENT</span>,
LayoutParams.<span style="color: rgb(0, 102, 0); ">WRAP_CONTENT</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView.<span style="color: rgb(0, 102, 0); ">displayZoomControls</span><span style="color: rgb(102, 204, 102); ">(</span><span style=" color: rgb(0, 0, 0); "><strong>true</strong></span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span> The complete MapsActivity.java file is given below:
<span style=" color: rgb(0, 0, 0); "><strong>package</strong></span> net.<span style="color: rgb(0, 102, 0); ">learn2develop</span>.<span style="color: rgb(0, 102, 0); ">GoogleMaps</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapActivity;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView.LayoutParams; </span>
<span style="color: rgb(161, 161, 0); ">import android.os.Bundle;</span>
<span style="color: rgb(161, 161, 0); ">import android.view.View;</span>
<span style="color: rgb(161, 161, 0); ">import android.widget.LinearLayout;</span>
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapsActivity <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> MapActivity
<span style="color: rgb(102, 204, 102); ">{</span>
MapView mapView<span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>/** Called when the activity is first created. */</em></span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">void</span> onCreate<span style="color: rgb(102, 204, 102); ">(</span>Bundle savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style=" color: rgb(0, 0, 0); "><strong>super</strong></span>.<span style="color: rgb(0, 102, 0); ">onCreate</span><span style="color: rgb(102, 204, 102); ">(</span>savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
setContentView<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">layout</span>.<span style="color: rgb(0, 102, 0); ">main</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView = <span style="color: rgb(102, 204, 102); ">(</span>MapView<span style="color: rgb(102, 204, 102); ">)</span> findViewById<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">id</span>.<span style="color: rgb(0, 102, 0); ">mapView</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
LinearLayout zoomLayout = <span style="color: rgb(102, 204, 102); ">(</span>LinearLayout<span style="color: rgb(102, 204, 102); ">)</span>findViewById<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">id</span>.<span style="color: rgb(0, 102, 0); ">zoom</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>View</strong></span></a> zoomView = mapView.<span style="color: rgb(0, 102, 0); ">getZoomControls</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
zoomLayout.<span style="color: rgb(0, 102, 0); ">addView</span><span style="color: rgb(102, 204, 102); ">(</span>zoomView,
<span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> LinearLayout.<span style="color: rgb(0, 102, 0); ">LayoutParams</span><span style="color: rgb(102, 204, 102); ">(</span>
LayoutParams.<span style="color: rgb(0, 102, 0); ">WRAP_CONTENT</span>,
LayoutParams.<span style="color: rgb(0, 102, 0); ">WRAP_CONTENT</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView.<span style="color: rgb(0, 102, 0); ">displayZoomControls</span><span style="color: rgb(102, 204, 102); ">(</span><span style=" color: rgb(0, 0, 0); "><strong>true</strong></span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>protected</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> isRouteDisplayed<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>// TODO Auto-generated method stub</em></span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>false</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span> Basically, you obtain the MapView instance on the activity, obtain its zoom controls and then add it to theLinearLayout element you added to the activity earlier on. In the above case, the zoom control will be displayed at the bottom of the screen. When you now press F11 in Eclipse, you will see the zoom controls when you touch the map (see Figure 4).
Figure 4 Using the zoom controls in Google Maps
Using the zoom control, you can zoom in or out of a location by simply touching the "+ or "-" buttons on the screen.
Alternatively, you can also programmatically zoom in or out of the map using the zoomIn() and zoomOut()methods from the MapController class:
<span style=" color: rgb(0, 0, 0); "><strong>package</strong></span> net.<span style="color: rgb(0, 102, 0); ">learn2develop</span>.<span style="color: rgb(0, 102, 0); ">GoogleMaps</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>//...</em></span>
<span style="color: rgb(161, 161, 0); ">import android.os.Bundle;</span>
<span style="color: rgb(161, 161, 0); ">import android.view.KeyEvent;</span>
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapsActivity <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> MapActivity
<span style="color: rgb(102, 204, 102); ">{</span>
MapView mapView<span style="color: rgb(102, 204, 102); ">;</span>
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> onKeyDown<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span> keyCode, <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AKeyEvent+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>KeyEvent</strong></span></a> event<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
MapController mc = mapView.<span style="color: rgb(0, 102, 0); ">getController</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(177, 177, 0); ">switch</span> <span style="color: rgb(102, 204, 102); ">(</span>keyCode<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(177, 177, 0); ">case</span> <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AKeyEvent+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>KeyEvent</strong></span></a>.<span style="color: rgb(0, 102, 0); ">KEYCODE_3</span>:
mc.<span style="color: rgb(0, 102, 0); ">zoomIn</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style=" color: rgb(0, 0, 0); "><strong>break</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(177, 177, 0); ">case</span> <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AKeyEvent+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>KeyEvent</strong></span></a>.<span style="color: rgb(0, 102, 0); ">KEYCODE_1</span>:
mc.<span style="color: rgb(0, 102, 0); ">zoomOut</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style=" color: rgb(0, 0, 0); "><strong>break</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>super</strong></span>.<span style="color: rgb(0, 102, 0); ">onKeyDown</span><span style="color: rgb(102, 204, 102); ">(</span>keyCode, event<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(128, 128, 128); "><em>/** Called when the activity is first created. */</em></span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">void</span> onCreate<span style="color: rgb(102, 204, 102); ">(</span>Bundle savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>//...</em></span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>protected</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> isRouteDisplayed<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>// TODO Auto-generated method stub</em></span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>false</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span>
In the above code, when the user presses the number 3 on the keyboard the map will zoom in into the next level. Pressing number 1 will zoom out one level.
Changing Views of the Map
By default, the Google Maps displays in the map mode. If you wish to display the map in satellite view, you can use the setSatellite() method of the MapView class, like this:
mapView.<span style="color: rgb(0, 102, 0); ">setSatellite</span><span style="color: rgb(102, 204, 102); ">(</span><span style=" color: rgb(0, 0, 0); "><strong>true</strong></span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
You can also display the map in street view, using the setStreetView() method:
mapView.<span style="color: rgb(0, 102, 0); ">setStreetView</span><span style="color: rgb(102, 204, 102); ">(</span><span style=" color: rgb(0, 0, 0); "><strong>true</strong></span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>Figure 5 shows the Google Maps displayed in satellite and street views, respectively.
Figure 5 Displaying Google Maps in satellite and street views
Displaying a Particular Location
Be default, the Google Maps displays the map of the United States when it is first loaded. However, you can also set the Google Maps to display a particular location. In this case, you can use the animateTo() method of theMapController class.
The following code shows how this is done:
<span style=" color: rgb(0, 0, 0); "><strong>package</strong></span> net.<span style="color: rgb(0, 102, 0); ">learn2develop</span>.<span style="color: rgb(0, 102, 0); ">GoogleMaps</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.GeoPoint;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapActivity;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapController;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView.LayoutParams;</span>
<span style="color: rgb(161, 161, 0); ">import android.os.Bundle;</span>
<span style="color: rgb(161, 161, 0); ">import android.view.View;</span>
<span style="color: rgb(161, 161, 0); ">import android.widget.LinearLayout;</span>
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapsActivity <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> MapActivity
<span style="color: rgb(102, 204, 102); ">{</span>
MapView mapView<span style="color: rgb(102, 204, 102); ">;</span>
MapController mc<span style="color: rgb(102, 204, 102); ">;</span>
GeoPoint p<span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>/** Called when the activity is first created. */</em></span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">void</span> onCreate<span style="color: rgb(102, 204, 102); ">(</span>Bundle savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style=" color: rgb(0, 0, 0); "><strong>super</strong></span>.<span style="color: rgb(0, 102, 0); ">onCreate</span><span style="color: rgb(102, 204, 102); ">(</span>savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
setContentView<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">layout</span>.<span style="color: rgb(0, 102, 0); ">main</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView = <span style="color: rgb(102, 204, 102); ">(</span>MapView<span style="color: rgb(102, 204, 102); ">)</span> findViewById<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">id</span>.<span style="color: rgb(0, 102, 0); ">mapView</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
LinearLayout zoomLayout = <span style="color: rgb(102, 204, 102); ">(</span>LinearLayout<span style="color: rgb(102, 204, 102); ">)</span>findViewById<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">id</span>.<span style="color: rgb(0, 102, 0); ">zoom</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AView+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>View</strong></span></a> zoomView = mapView.<span style="color: rgb(0, 102, 0); ">getZoomControls</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
zoomLayout.<span style="color: rgb(0, 102, 0); ">addView</span><span style="color: rgb(102, 204, 102); ">(</span>zoomView,
<span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> LinearLayout.<span style="color: rgb(0, 102, 0); ">LayoutParams</span><span style="color: rgb(102, 204, 102); ">(</span>
LayoutParams.<span style="color: rgb(0, 102, 0); ">WRAP_CONTENT</span>,
LayoutParams.<span style="color: rgb(0, 102, 0); ">WRAP_CONTENT</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView.<span style="color: rgb(0, 102, 0); ">displayZoomControls</span><span style="color: rgb(102, 204, 102); ">(</span><span style=" color: rgb(0, 0, 0); "><strong>true</strong></span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mc = mapView.<span style="color: rgb(0, 102, 0); ">getController</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3AString+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>String</strong></span></a> coordinates<span style="color: rgb(102, 204, 102); ">[</span><span style="color: rgb(102, 204, 102); ">]</span> = <span style="color: rgb(102, 204, 102); ">{</span><span style="color: rgb(255, 0, 0); ">"1.352566007"</span>, <span style="color: rgb(255, 0, 0); ">"103.78921587"</span><span style="color: rgb(102, 204, 102); ">}</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(153, 51, 51); ">double</span> lat = <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3ADouble+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Double</strong></span></a>.<span style="color: rgb(0, 102, 0); ">parseDouble</span><span style="color: rgb(102, 204, 102); ">(</span>coordinates<span style="color: rgb(102, 204, 102); ">[</span><span style="color: rgb(204, 102, 204); ">0</span><span style="color: rgb(102, 204, 102); ">]</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(153, 51, 51); ">double</span> lng = <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3ADouble+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Double</strong></span></a>.<span style="color: rgb(0, 102, 0); ">parseDouble</span><span style="color: rgb(102, 204, 102); ">(</span>coordinates<span style="color: rgb(102, 204, 102); ">[</span><span style="color: rgb(204, 102, 204); ">1</span><span style="color: rgb(102, 204, 102); ">]</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
p = <span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> GeoPoint<span style="color: rgb(102, 204, 102); ">(</span>
<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">(</span>lat <span style="color: rgb(102, 204, 102); ">*</span> 1E6<span style="color: rgb(102, 204, 102); ">)</span>,
<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">(</span>lng <span style="color: rgb(102, 204, 102); ">*</span> 1E6<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mc.<span style="color: rgb(0, 102, 0); ">animateTo</span><span style="color: rgb(102, 204, 102); ">(</span>p<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mc.<span style="color: rgb(0, 102, 0); ">setZoom</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(204, 102, 204); ">17</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView.<span style="color: rgb(0, 102, 0); ">invalidate</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>protected</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> isRouteDisplayed<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>// TODO Auto-generated method stub</em></span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>false</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span>
In the above code, you first obtain a controller from the MapView instance and assign it to a MapController object (mc). You use a GeoPoint object to represent a geographical location. Note that for this class the latitude and longitude of a location are represented in micro degrees. This means that they are stored as integer values. For a latitude value of 40.747778, you need to multiply it by 1e6 to obtain 40747778.
To navigate the map to a particular location, you can use the animateTo() method of the MapController class (an instance which is obtained from the MapView object). The setZoom() method allows you to specify the zoom level in which the map is displayed. Figure 6 shows the Google Maps displaying the map of Singapore.
Figure 6 Navigating to a particular location on the map
Adding Markers
Very often, you may wish to add markers to the map to indicate places of interests. Let's see how you can do this in Android. First, create a GIF image containing a pushpin (see Figure 7) and copy it into the res/drawable folder of the project. For best effect, you should make the background of the image transparent so that it does not block off parts of the map when the image is added to the map.
Figure 7 Adding an image to the res/drawable folder
To add a marker to the map, you first need to define a class that extends the Overlay class:
<span style=" color: rgb(0, 0, 0); "><strong>package</strong></span> net.<span style="color: rgb(0, 102, 0); ">learn2develop</span>.<span style="color: rgb(0, 102, 0); ">GoogleMaps</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(161, 161, 0); ">import java.util.List;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.GeoPoint;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapActivity;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapController;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.Overlay;</span>
<span style="color: rgb(161, 161, 0); ">import com.google.android.maps.MapView.LayoutParams;</span>
<span style="color: rgb(161, 161, 0); ">import android.graphics.Bitmap;</span>
<span style="color: rgb(161, 161, 0); ">import android.graphics.BitmapFactory;</span>
<span style="color: rgb(161, 161, 0); ">import android.graphics.Canvas;</span>
<span style="color: rgb(161, 161, 0); ">import android.graphics.Point;</span>
<span style="color: rgb(161, 161, 0); ">import android.os.Bundle;</span>
<span style="color: rgb(161, 161, 0); ">import android.view.View;</span>
<span style="color: rgb(161, 161, 0); ">import android.widget.LinearLayout;</span>
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapsActivity <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> MapActivity
<span style="color: rgb(102, 204, 102); ">{</span>
MapView mapView<span style="color: rgb(102, 204, 102); ">;</span>
MapController mc<span style="color: rgb(102, 204, 102); ">;</span>
GeoPoint p<span style="color: rgb(102, 204, 102); ">;</span>
<span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapOverlay <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> com.<span style="color: rgb(0, 102, 0); ">google</span>.<span style="color: rgb(0, 102, 0); ">android</span>.<span style="color: rgb(0, 102, 0); ">maps</span>.<span style="color: rgb(0, 102, 0); ">Overlay</span>
<span style="color: rgb(102, 204, 102); ">{</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> draw<span style="color: rgb(102, 204, 102); ">(</span><a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3ACanvas+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Canvas</strong></span></a> canvas, MapView mapView,
<span style="color: rgb(153, 51, 51); ">boolean</span> shadow, <span style="color: rgb(153, 51, 51); ">long</span> when<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style=" color: rgb(0, 0, 0); "><strong>super</strong></span>.<span style="color: rgb(0, 102, 0); ">draw</span><span style="color: rgb(102, 204, 102); ">(</span>canvas, mapView, shadow<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>//---translate the GeoPoint to screen pixels---</em></span>
<a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3APoint+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Point</strong></span></a> screenPts = <span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3APoint+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Point</strong></span></a><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView.<span style="color: rgb(0, 102, 0); ">getProjection</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>.<span style="color: rgb(0, 102, 0); ">toPixels</span><span style="color: rgb(102, 204, 102); ">(</span>p, screenPts<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>//---add the marker---</em></span>
Bitmap bmp = BitmapFactory.<span style="color: rgb(0, 102, 0); ">decodeResource</span><span style="color: rgb(102, 204, 102); ">(</span>
getResources<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>, R.<span style="color: rgb(0, 102, 0); ">drawable</span>.<span style="color: rgb(0, 102, 0); ">pushpin</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
canvas.<span style="color: rgb(0, 102, 0); ">drawBitmap</span><span style="color: rgb(102, 204, 102); ">(</span>bmp, screenPts.<span style="color: rgb(0, 102, 0); ">x</span>, screenPts.<span style="color: rgb(0, 102, 0); ">y</span><span style="color: rgb(204, 102, 204); ">-50</span>, <span style=" color: rgb(0, 0, 0); "><strong>null</strong></span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>true</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(128, 128, 128); "><em>/** Called when the activity is first created. */</em></span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">void</span> onCreate<span style="color: rgb(102, 204, 102); ">(</span>Bundle savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>//...</em></span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>protected</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> isRouteDisplayed<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>// TODO Auto-generated method stub</em></span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>false</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span>
In the MapOverlay class that you have defined, override the draw() method so that you can draw the pushpin image on the map. In particular, note that you need to translate the geographical location (represented by aGeoPoint object, p) into screen coordinates.
As you want the pointed tip of the push pin to indicate the position of the location, you would need to deduct the height of the image (which is 50 pixels) from the y-coordinate of the point (see Figure 8) and draw the image at that location.
Figure 8 Adding an image to the map
To add the marker, create an instance of the MapOverlap class and add it to the list of overlays available on theMapView object:
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">void</span> onCreate<span style="color: rgb(102, 204, 102); ">(</span>Bundle savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style=" color: rgb(0, 0, 0); "><strong>super</strong></span>.<span style="color: rgb(0, 102, 0); ">onCreate</span><span style="color: rgb(102, 204, 102); ">(</span>savedInstanceState<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
setContentView<span style="color: rgb(102, 204, 102); ">(</span>R.<span style="color: rgb(0, 102, 0); ">layout</span>.<span style="color: rgb(0, 102, 0); ">main</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>//...</em></span>
mc.<span style="color: rgb(0, 102, 0); ">animateTo</span><span style="color: rgb(102, 204, 102); ">(</span>p<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mc.<span style="color: rgb(0, 102, 0); ">setZoom</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(204, 102, 204); ">17</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(128, 128, 128); "><em>//---Add a location marker---</em></span>
MapOverlay mapOverlay = <span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> MapOverlay<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
List<span style="color: rgb(102, 204, 102); "><</span>Overlay<span style="color: rgb(102, 204, 102); ">></span> listOfOverlays = mapView.<span style="color: rgb(0, 102, 0); ">getOverlays</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
listOfOverlays.<span style="color: rgb(0, 102, 0); ">clear</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
listOfOverlays.<span style="color: rgb(0, 102, 0); ">add</span><span style="color: rgb(102, 204, 102); ">(</span>mapOverlay<span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
mapView.<span style="color: rgb(0, 102, 0); ">invalidate</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>Figure 9 shows how the pushpin looks like when added to the map.
Figure 9 Adding a marker to the map
Getting the Location that was touched
After using Google Maps for a while, you may wish to know the latitude and longitude of a location corresponding to the position on the screen that you have just touched. Knowing this information is very useful as you can find out the address of a location, a process known as Geocoding (you will see how this is done in the next section).
If you have added an overlay to the map, you can override the onTouchEvent() method within the Overlay class. This method is fired every time the user touches the map. This method has two parameters - MotionEvent andMapView. Using the MotionEvent parameter, you can know if the user has lifted his finger from the screen using the getAction() method. In the following code, if the user has touched and then lifted his finger, you will display the latitude and longitude of the location touched:
<span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapOverlay <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> com.<span style="color: rgb(0, 102, 0); ">google</span>.<span style="color: rgb(0, 102, 0); ">android</span>.<span style="color: rgb(0, 102, 0); ">maps</span>.<span style="color: rgb(0, 102, 0); ">Overlay</span>
<span style="color: rgb(102, 204, 102); ">{</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> draw<span style="color: rgb(102, 204, 102); ">(</span><a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3ACanvas+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Canvas</strong></span></a> canvas, MapView mapView,
<span style="color: rgb(153, 51, 51); ">boolean</span> shadow, <span style="color: rgb(153, 51, 51); ">long</span> when<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>//...</em></span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> onTouchEvent<span style="color: rgb(102, 204, 102); ">(</span>MotionEvent event, MapView mapView<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>//---when user lifts his finger---</em></span>
<span style="color: rgb(177, 177, 0); ">if</span> <span style="color: rgb(102, 204, 102); ">(</span>event.<span style="color: rgb(0, 102, 0); ">getAction</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> == <span style="color: rgb(204, 102, 204); ">1</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
GeoPoint p = mapView.<span style="color: rgb(0, 102, 0); ">getProjection</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>.<span style="color: rgb(0, 102, 0); ">fromPixels</span><span style="color: rgb(102, 204, 102); ">(</span>
<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span><span style="color: rgb(102, 204, 102); ">)</span> event.<span style="color: rgb(0, 102, 0); ">getX</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>,
<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span><span style="color: rgb(102, 204, 102); ">)</span> event.<span style="color: rgb(0, 102, 0); ">getY</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
Toast.<span style="color: rgb(0, 102, 0); ">makeText</span><span style="color: rgb(102, 204, 102); ">(</span>getBaseContext<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>,
p.<span style="color: rgb(0, 102, 0); ">getLatitudeE6</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> / 1E6 + <span style="color: rgb(255, 0, 0); ">","</span> +
p.<span style="color: rgb(0, 102, 0); ">getLongitudeE6</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> /1E6 ,
Toast.<span style="color: rgb(0, 102, 0); ">LENGTH_SHORT</span><span style="color: rgb(102, 204, 102); ">)</span>.<span style="color: rgb(0, 102, 0); ">show</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style=" color: rgb(0, 0, 0); "><strong>return</strong></span> <span style=" color: rgb(0, 0, 0); "><strong>false</strong></span><span style="color: rgb(102, 204, 102); ">;</span>
<span style="color: rgb(102, 204, 102); ">}</span>
<span style="color: rgb(102, 204, 102); ">}</span>Figure 10 shows this in action.
Figure 10 Displaying the latitude and longitude of a point touched on the map
Geocoding and Reverse Geocoding
If you know the latitude and longitude of a location, you can find out its address using a process known as Geocoding. Google Maps in Android supports this via the Geocoder class. The following code shows how you can find out the address of a location you have just touched using the getFromLocation() method:
<span style=" color: rgb(0, 0, 0); "><strong>class</strong></span> MapOverlay <span style=" color: rgb(0, 0, 0); "><strong>extends</strong></span> com.<span style="color: rgb(0, 102, 0); ">google</span>.<span style="color: rgb(0, 102, 0); ">android</span>.<span style="color: rgb(0, 102, 0); ">maps</span>.<span style="color: rgb(0, 102, 0); ">Overlay</span>
<span style="color: rgb(102, 204, 102); ">{</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> draw<span style="color: rgb(102, 204, 102); ">(</span><a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3ACanvas+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Canvas</strong></span></a> canvas, MapView mapView,
<span style="color: rgb(153, 51, 51); ">boolean</span> shadow, <span style="color: rgb(153, 51, 51); ">long</span> when<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>//...</em></span>
<span style="color: rgb(102, 204, 102); ">}</span>
@Override
<span style=" color: rgb(0, 0, 0); "><strong>public</strong></span> <span style="color: rgb(153, 51, 51); ">boolean</span> onTouchEvent<span style="color: rgb(102, 204, 102); ">(</span>MotionEvent event, MapView mapView<span style="color: rgb(102, 204, 102); ">)</span>
<span style="color: rgb(102, 204, 102); ">{</span>
<span style="color: rgb(128, 128, 128); "><em>//---when user lifts his finger---</em></span>
<span style="color: rgb(177, 177, 0); ">if</span> <span style="color: rgb(102, 204, 102); ">(</span>event.<span style="color: rgb(0, 102, 0); ">getAction</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> == <span style="color: rgb(204, 102, 204); ">1</span><span style="color: rgb(102, 204, 102); ">)</span> <span style="color: rgb(102, 204, 102); ">{</span>
GeoPoint p = mapView.<span style="color: rgb(0, 102, 0); ">getProjection</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>.<span style="color: rgb(0, 102, 0); ">fromPixels</span><span style="color: rgb(102, 204, 102); ">(</span>
<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span><span style="color: rgb(102, 204, 102); ">)</span> event.<span style="color: rgb(0, 102, 0); ">getX</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>,
<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(153, 51, 51); ">int</span><span style="color: rgb(102, 204, 102); ">)</span> event.<span style="color: rgb(0, 102, 0); ">getY</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
Geocoder geoCoder = <span style=" color: rgb(0, 0, 0); "><strong>new</strong></span> Geocoder<span style="color: rgb(102, 204, 102); ">(</span>
getBaseContext<span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span>, <a target=_blank href="http://www.google.com/search?hl=en&q=allinurl%3ALocale+java.sun.com&btnI=I%27m%20Feeling%20Lucky" style="color: rgb(51, 102, 153); text-decoration: none; "><span style=" color: rgb(170, 170, 221); "><strong>Locale</strong></span></a>.<span style="color: rgb(0, 102, 0); ">getDefault</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
<span style=" color: rgb(0, 0, 0); "><strong>try</strong></span> <span style="color: rgb(102, 204, 102); ">{</span>
List<span style="color: rgb(102, 204, 102); "><</span>Address<span style="color: rgb(102, 204, 102); ">></span> addresses = geoCoder.<span style="color: rgb(0, 102, 0); ">getFromLocation</span><span style="color: rgb(102, 204, 102); ">(</span>
p.<span style="color: rgb(0, 102, 0); ">getLatitudeE6</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> / 1E6,
p.<span style="color: rgb(0, 102, 0); ">getLongitudeE6</span><span style="color: rgb(102, 204, 102); ">(</span><span style="color: rgb(102, 204, 102); ">)</span> / 1E6, <span style="color: rgb(204, 102, 204); ">1</span><span style="color: rgb(102, 204, 102); ">)</span><span style="color: rgb(102, 204, 102); ">;</span>
扫一扫
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
