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 Tech Lead, Android Maps API Jan-Felix Schmakeit 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

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

Required Downloads

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

Worksheet: Lesson 0 http://goo.gl/MfY67 What you will do:

• Setup IDE and environment
• Import skeleton project
• Compile and deploy to device

Lesson 0: Get set up

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

Worksheet: Lesson 1 http://goo.gl/MfY67 What you will do:

• AndroidManifest.xml
• Extend MapFragment
• Basic setup

Lesson 1: Add a Map

Lesson 2: Markers

Markers, custom icons, keeping track of them

Indicates a point on a map Properties:

• Position (required)
• Title and snippet
• Dragging
• Visibility
• Icon (default icon, coloured icon, custom icon)

and anchor

What's a Marker?

Adding a Marker

Java

map.addMarker(new MarkerOptions() .position(new LatLng(51.5075744, -0.0992315));

Worksheet: Lesson 2 http://goo.gl/MfY67 What you will do:

• Add markers
• Set custom icons

Lesson 2: Markers

Lesson 3: Info Windows

Custom Info Windows, click events

What's an info window?

Default Custom Content Custom Window

InfoWindowAdapter: custom content

Java

class CustomInfoWindowAdapter implements InfoWindowAdapter { 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!

• Need to call showInfoWindow() to refresh
• Can't use live views

OnInfoWindowClickListener

• Only single target

Worksheet: Lesson 3 http://goo.gl/MfY67 What you will do:

• Add custom info window
• Add info window click event

Lesson 3: Info Windows

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);

Worksheet: Lesson 4 http://goo.gl/MfY67 What you will do:

• Change base map type
• Enable My Location layer

Lesson 4: Layers

Lesson 5: Camera Movement

CameraPositions, CameraUpdates, animateCamera

Changing the camera

First: Need a CameraUpdate from CameraUpdateFactory There's also: newLatLngZoom, newCameraPositon, newLatLngBounds, zoomIn/Out, scroll, ... Then: animate (or move) the camera

CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLng(new LatLng(-33.89, 151.27)); mMap.animateCamera(cameraUpdate);

Worksheet: Lesson 5 http://goo.gl/MfY67 What you will do:

• Animate to POIs
• Reset camera position

Lesson 5: Camera Movement

Lesson 6: Shapes

PolylineOptions

Polyline Polygon Circle

Add shapes to your map

Polyline Polygon Circle

Add shapes to your map

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

Worksheet: Lesson 6 http://goo.gl/MfY67 What you will do:

• Add route line

Lesson 6: Shapes

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));