Developers Google Maps Android API v2 Make your Android app pop - PowerPoint PPT Presentation

Developers

Google Maps Android API v2 Make your Android app pop with Google Maps Android API v2 Anthony Morris Jan-Felix Schmakeit Tech Lead, Android Maps API Android Developer Relations Code, Slides, Worksheet: http://goo.gl/MfY67

Welcome! http://goo.gl/MfY67

Let's take a walking tour of London Our App for today: Tour of London

http://goo.gl/MfY67

http://goo.gl/MfY67

Codelab Format 6 Lessons: Add a map to an app Help each other! Ask our friendly Teaching Assistants Bonus challenges: ... and super bonus challenges: Worksheet, Code, Slides: http://goo.gl/MfY67

Our Agenda 0. Get set up 1. Map 2. Markers 3. Info windows 4. Layers 5. Camera 6. Shapes http://goo.gl/MfY67

Prerequisites http://goo.gl/MfY67

Required Downloads See worksheet! IDE for Android Development ○ Eclipse or Android Studio ○ If unsure, get the Android SDK Bundle: http://developer.android.com/sdk Android SDK, API 17 ○ Google Play services library included in codelab archive http://goo.gl/MfY67

Android Device Required: Tablet and/or phone with Android 4.0 or above Unfortunately you can't use the emulator http://goo.gl/MfY67

Google Play services Google Maps, Google+, Location, Games and more! On all Google Play devices, Froyo+ http://goo.gl/MfY67

Lesson 0: Get set up Importing the project, run the app on your device

Lesson 0: Get set up Worksheet: Lesson 0 http://goo.gl/MfY67 What you will do: ● Setup IDE and environment ● Import skeleton project ● Compile and deploy to device

Lesson 1: Add Map MapFragment, API Key, Permissions

API Key - Android Maps API v2 You will need an API key ● Unlimited usage ● Register with your keystore + package name

MapFragment It's a Fragment... with a map! ● com.google.android.gms.maps.MapFragment ● Use GoogleMap object to interact with map: getMap() What about Gingerbread? ● Use SupportMapFragment !

Android Manifest Specify API key Require OpenGL ES 2 Required Permissions: ● Custom Maps Permission ● Internet Access ● Write External Storage Permission ● Optional: Coarse or Fine Location

Lesson 1: Add a Map Worksheet: Lesson 1 http://goo.gl/MfY67 What you will do: ● AndroidManifest.xml ● Extend MapFragment ● Basic setup

Lesson 2: Markers Markers, custom icons, keeping track of them

What's a Marker? Indicates a point on a map Properties: ● Position (required) ● Title and snippet ● Dragging ● Visibility ● Icon (default icon, coloured icon, custom icon) and anchor

Adding a Marker Java map.addMarker(new MarkerOptions() .position(new LatLng(51.5075744, -0.0992315));

Lesson 2: Markers Worksheet: Lesson 2 http://goo.gl/MfY67 What you will do: ● Add markers ● Set custom icons

Lesson 3: Info Windows Custom Info Windows, click events

What's an info window? Default Custom Content Custom Window

InfoWindowAdapter: custom content class CustomInfoWindowAdapter implements InfoWindowAdapter { Java View getInfoWindow(Marker marker) { // No custom info window return null; } View getInfoContents(Marker marker) { View fancyContents; // ... return fancyContents; } }

A few notes about info windows Only a snapshot! OnInfoWindowClickListener ● Only single target ● Need to call showInfoWindow() to refresh ● Can't use live views

Lesson 3: Info Windows Worksheet: Lesson 3 http://goo.gl/MfY67 What you will do: ● Add custom info window ● Add info window click event

Lesson 4: Layers Map Types, Traffic, My Location

Map Types Normal Hybrid Satellite Terrain

Set Map Type Java GoogleMap map; map.setMapType(GoogleMap.MAP_TYPE_HYBRID);

My Location & Traffic Java GoogleMap map; map.setMyLocationEnabled(true); map.setTrafficEnabled(true);

Lesson 4: Layers Worksheet: Lesson 4 http://goo.gl/MfY67 What you will do: ● Change base map type ● Enable My Location layer

Lesson 5: Camera Movement CameraPositions, CameraUpdates, animateCamera

Changing the camera First: Need a CameraUpdate from CameraUpdateFactory CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLng(new LatLng(-33.89, 151.27)); There's also: newLatLngZoom, newCameraPositon, newLatLngBounds, zoomIn/Out, scroll, ... Then: animate (or move ) the camera mMap.animateCamera(cameraUpdate);

Lesson 5: Camera Movement Worksheet: Lesson 5 http://goo.gl/MfY67 What you will do: ● Animate to POIs ● Reset camera position

Lesson 6: Shapes PolylineOptions

Add shapes to your map Polyline Polygon Circle

Add shapes to your map Polyline Polygon Circle

Add a polyline Java PolylineOptions options = new PolylineOptions() .add(new LatLng(a,b)) .add(new LatLng(c,d)) .color(0xFFAA0000) .width(10); // Add it to the map. mMap.addPolyline(options);

Changing Properties Common shape properties: ● width ● stroke color ● z-index ● visibility Filled shapes (polygons, circles): ● fill color Lines: ● geodesic segments

Lesson 6: Shapes Worksheet: Lesson 6 http://goo.gl/MfY67 What you will do: ● Add route line

Final Tour of London What you have built today

Our App API features: ● MapFragment ● Markers ● Info windows ● Layers ● Camera ● Shapes ... and there's more: https://developers.google.com/maps/documentation/android/

Thank you! Link to codelab (notes, presentation, code): http://goo.gl/MfY67 Anthony Morris Jan-Felix Schmakeit

Extra Material

Default marker with custom colour Java map.addMarker(new MarkerOptions() .position(new LatLng(51.51309, -0.12441)) .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN))

Custom marker icon Java map.addMarker(new MarkerOptions() .position(new LatLng(51.5075744, -0.0992315)) .icon(BitmapDescriptorFactory.fromResource(R.drawable.marker_museum));