46
Chapter 11: Discover! Incorporating Google Maps

Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Embed Size (px)

Citation preview

Page 1: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Chapter 11: Discover! Incorporating Google Maps

Page 2: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Objectives

In this chapter, you learn to:• Create an Android project displaying a Google map• Install the Google API to the SDK• Set up a Google API Android Virtual Device• Locate your MD5 certificate• Sign up for a Google Maps API key• Understand security and permissions

2Android Boot Camp for Developers using Java

Page 3: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Objectives (continued)

• Access the MapView class• Code the populate( ) method• Add the onTap( ) method• Set permissions for maps in the Android Manifest file• Create a GeoPoint overlay

3Android Boot Camp for Developers using Java

Page 4: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Using Google Maps

• Smartphones canaccess online mapsusing a built-in AndroidGoogle Maps application

• Users can zoom in to see details

• Can be customized

4Android Boot Camp for Developers using Java

Figure 11-1 Maps Application

Page 5: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Using Google Maps (continued)

Steps to complete the App:

1. Install the Google API add-on to the SDK.

2. Add the AVD that uses the Google API deployment target.

3. Obtain a personal Maps API key from Google.

4. Define a MapView inside a Linear layout in main.xml.

5. Add permissions to the Android Manifest file to access the Internet and the Google library.

6. Add a no title bar theme to the Android Manifest file.

7. Add the pushpin image to the drawable folder.

8. Code the MapView in Main.java.

9. Add Overlay objects to the map.

10. Call the populate( ) method to read each Overlay object.

11. Display two GeoPoint overlays.

5Android Boot Camp for Developers using Java

Page 6: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Using Google Maps (continued)

• Google Maps is a Free online mapping service offering things like:– Turn-by-turn directions– GPS Location Services– Directions to a hotel– Distance of a morning run– Street view images– Bike path directions– Possible Traffic delays– Public transit routes

• Began in the United States in 2005• Updated Frequently

6Android Boot Camp for Developers using Java

Page 7: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Installing the Google API

7Android Boot Camp for Developers using Java

• API – Application Programming Interface– A set of tools for building software applications

• Downloading, rendering, and caching of map files– Must be downloaded and installed in your SDK

environment

Figure 11-3 Android SDK Manager

Page 8: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Installing the Google API (continued)

8Android Boot Camp for Developers using Java

• Adding the AVD to Target the Google API– Android Virtual Device (AVD) must be set to use the

Google API

Figure 11-4 Android Virtual device Manager dialog box

Page 9: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

9Android Boot Camp for Developers using Java

Figure 11-5 Create new Android Virtual Device (AVD) dialog box

Installing the Google API (continued)

Figure 11-6 Google API displayed in the AVD list

Page 10: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Obtaining a Maps API Key from Google

10Android Boot Camp for Developers using Java

• Must apply for a free Google Maps API key– Register and agree to terms with Google

Maps Service– Your computer’s MD5 (Message-Digest

Algorithm 5) digital fingerprint verifies the integrity of the file

– A unique Google Maps API key is generated:• Certificate fingerprint (MD5):

94:1E:43:49:87:73:BB:E6:A6:88:D7:20:F1:8E:B5:98

Page 11: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

• You cannot run a Google Map app if it is not signed with your local API key. – Key is stored in a file named debug.keystore

Obtaining a Maps API Key from Google (continued)

11Android Boot Camp for Developers using Java

Figure 11-7 Location of the debug.keystore file on a Windows 7 computer

Page 12: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Obtaining a Maps API Key from Google (continued)

12Android Boot Camp for Developers using Java

Figure 11-8 MD5 fingerprint in the Command Prompt window

Page 13: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

13Android Boot Camp for Developers using Java

• Troubleshooting:– Keytool not recognized

• You need to locate the keytool executable file on your computer

– A fingerprint other than MD5 is generated• A fingerprint such as SHA1 might appear instead of

the MD5 fingerprint

Obtaining a Maps API Key from Google (continued)

Page 14: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

14Android Boot Camp for Developers using Java

• Registering the MD5 Fingerprint with the Google Maps Service– A single Maps API key is valid for all applications

signed by a single certificate– Place theMD5 fingerprint in the Google Registration page– You need a Gmail account to receive the API key– Place the API key in the XML layout code– http://developers.google.com/android/maps-api-signup

Obtaining a Maps API Key from Google (continued)

Page 15: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

15Android Boot Camp for Developers using Java

Obtaining a Maps API Key from Google (continued)

Figure 11-10 Android Maps API Key Signup Web Site

Page 16: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

16Android Boot Camp for Developers using Java

Obtaining a Maps API Key from Google (continued)

Figure 11-11 Unique MD5 fingerprint code

Page 17: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

17Android Boot Camp for Developers using Java

Obtaining a Maps API Key from Google (continued)

Figure 11-12 Android Maps API key

Page 18: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

18Android Boot Camp for Developers using Java

• Adding the MapView element in the XML Code– API key attribute holds the Google Maps API key

that proves your application and signed certificate are registered with the Google Maps service

– the API key must be added to the main.xml layout file

– You must use the <com.google.android.maps.MapView/> element to display the Google Maps in your Activity

Obtaining a Maps API Key from Google (continued)

Page 19: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

19Android Boot Camp for Developers using Java

<com.google.android.maps.MapView android:id="@ +id/mapview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:enabled="true" android:clickable="true" android:apiKey="0HljqLj_jO8oBj4g8zSxyEuezie5-mE_56_UiXA“ />

Note: Your generated apiKey will be different.

Obtaining a Maps API Key from Google (continued)

Page 20: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

• Adding Permissions to the Android Manifest File– Permissions are necessary to prevent malicious

outside applications from corrupting data and accessing sensitive information including:• Full access to the Internet• Your GPS location• Your personal information• Phone calls• SMS Messages• Other system tools

20Android Boot Camp for Developers using Java

Obtaining a Maps API Key from Google (continued)

Page 21: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

21Android Boot Camp for Developers using Java

Figure 11-16 Android Manifest code with the Google library permission

Obtaining a Maps API Key from Google (continued)

Page 22: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Understanding MapView

22Android Boot Camp for Developers using Java

• The MapView class displays and manipulates a Google Map– The setBuiltInZoomControls property allows the

site visitor to use the built-in zoom feature

MapView mapView = (MapView) findViewById(R.id.mapview);mapView.setBuiltInZoomControls(true);

Page 23: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Understanding MapView (continued)

23Android Boot Camp for Developers using Java

Figure 11-19 Main Extends MapActivity

Figure 11-20 Instance of MapView and the zoom controls set to true

Page 24: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Understanding MapView (continued)

24Android Boot Camp for Developers using Java

Figure 11-21 Google Maps displayed in the Android emulator

Page 25: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

• Overlays – also called Map markers – use a graphic image to indicate a specific location on a map

• Use the ItemizedOverlay class to manage the individual items placed as a layer on the map

Adding Overlay Items

25Android Boot Camp for Developers using Java

Page 26: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

26Android Boot Camp for Developers using Java

Figure 11-22 Overlay.java class

Page 27: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

27Android Boot Camp for Developers using Java

Figure 11-23 Overlay.java class automated code

Page 28: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

• Adding Overlay Objects to an ArrayList– Assign an expandable array called ArrayList– Customized constructors needed to define default

markers– Populate() method used to add each pushpin item

to the display

28Android Boot Camp for Developers using Java

Page 29: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

29Android Boot Camp for Developers using Java

private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();private Context mContext;public Overlay(Drawable defaultMarker, Context context) {super(boundCenterBottom(defaultMarker));mContext = context;// TODO Auto-generated constructor stub}public void addOverlay(OverlayItem overlay) {mOverlays.add(overlay);populate();}@Overrideprotected OverlayItem createItem(int i) {// TODO Auto-generated method stubreturn mOverlays.get(i);}@Overridepublic int size() {// TODO Auto-generated method stubreturn mOverlays.size();}

Page 30: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

30Android Boot Camp for Developers using Java

Figure 11-25 Overlay constructor

Page 31: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

31Android Boot Camp for Developers using Java

Figure 11-26 The addOverlay method populates the pushpin images

Page 32: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

32Android Boot Camp for Developers using Java

Figure 11-27 OverlayItem method

Page 33: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

• Coding the onTap Method– onTap() method receives the index of the overlay item selected by

the user– The AlertDialog box displays a message to the user

• The show() method is actually used to display the dialog box

@Overrideprotected 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;}

Adding Overlay Items (continued)

33Android Boot Camp for Developers using Java

Page 34: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

34Android Boot Camp for Developers using Java

Figure 11-29 onTap() method

Page 35: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

35Android Boot Camp for Developers using Java

Figure 11-30 Instance named item and the AlertDialog box are coded

Page 36: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

36Android Boot Camp for Developers using Java

Figure 11-31 Complete code of Overlay.java

Page 37: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Adding Overlay Items (continued)

37Android Boot Camp for Developers using Java

Figure 11-32 List of Overlay items

• Coding the Drawable Overlay

Figure 11-33 The pushpin image becomes the map marker

Page 38: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Locating a GeoPoint

• Default Google map is of the United States• Any worldwide location can be found by panning and

zooming• Map location – called the GeoPoint – contains latitude

and longitude coordinates• GeoPoint locations are in microdegrees (degrees * 1e6)

– For example, Lynchburg Virginia’s latitude and longitude coordinates are 37.4198°, -79.14°, which yields coordinates of 37419800, -79140000 microdegrees

38Android Boot Camp for Developers using Java

Page 39: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Locating a GeoPoint (continued)

• Coding the GeoPoint Location

39Android Boot Camp for Developers using Java

Figure 11-35 First GeoPoint

Page 40: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Locating a GeoPoint (continued)

40Android Boot Camp for Developers using Java

Figure 11-36 Second GeoPoint

Page 41: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Locating a GeoPoint (continued)

41Android Boot Camp for Developers using Java

Figure 11-37 Main.java complete code

Page 42: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Summary

• To use Google Maps, you must install the Google API (application programming interface) in the Android SDK and then embed the Google Maps site directly into an Android application and overlay app-specific data on the map

• Set the application’s properties to select the Google APIs add-on as the build target, which sets the Android Virtual Device (AVD) Manager to use the new Google API

• You need to apply for a free Google Maps API key to integrate Google Maps into your Android application

42Android Boot Camp for Developers using Java

Page 43: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Summary (continued)

• Using the MD5 fingerprint, you can register with Google for aMaps API key at the onlineGoogleMaps service. To display a Googlemap in an Android app, you must add the API key to the main.xml layout file in your project

• You must use the <com.google.android.maps.MapView> element to display the Google Maps in your Activity

43Android Boot Camp for Developers using Java

Page 44: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Summary (continued)

• Android apps use permissions to prevent malicious outside applications from corrupting data and accessing sensitive information. Apps need permission to access the Internet and connect with the Google mapping feature

• Google mapping technology relies on the Android MapView class

44Android Boot Camp for Developers using Java

Page 45: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Summary (continued)

• An instance of MapView uses the setBuiltInZoomControls property. When set to true, this property allows site visitors to use the built-in zoom feature on the map in your Android app

• A map marker, or overlay, uses a graphic image such as a pushpin to indicate a specific location on a map

• The Overlay class assigns an ArrayList to hold the overlay objects, such as pushpin images, displayed in a layer on the map

45Android Boot Camp for Developers using Java

Page 46: Chapter 11: Discover! Incorporating Google Maps. Objectives In this chapter, you learn to: Create an Android project displaying a Google map Install the

Summary (continued)

• Use the populate( ) method to add each new item in the ItemizedOverlay to the map

• Use the onTap() method to display a text message• Use an instance of the MapView class to list points

of interest• Users can pan and zoom to find any location in the

world from the default USA map• GeoPoints contain latitude & longitude coordinates• Use the add( ) method to display the GeoPoints as

an overlay on the map46Android Boot Camp for Developers using Java