google maps mobile apis by kasia derc-fenske

kaskaderc

@kaskaderc +Kasia Derc-Fenske // Google

Kasia Derc-Fenske

Google Maps Mobile APIs

1Friday, March 22, 13

kaskaderc Kasia Derc-Fenske | Google+Kasia Derc-Fenske

Google Maps Mobile APIs

Google MapsAndroid API v2

Google MapsSDK for iOS


Kasia Derc-Fenske | Google+Kasia Derc-Fenske

Goal of this presto kaskaderc



Key features kaskaderc

Android iOS

Platforms

Vector Maps

Camera Positioning

Markers & Info Windows

Drawing

Overlays

Layers

API level 12 (level 4 w/Support Library), GLES 2

Development: Xcode 4.5+, iOS SDK 6.+.Target platform: iOS 5.1

3D Buildings, Roadmap, Hybrid Map, Satellite Imagery, Terrain Map3D Buildings, Roadmap, Hybrid Map, Satellite Imagery, Terrain Map

Zoom, Pan, Tilt, Bearing, AnimationZoom, Pan, Tilt, Bearing, Animation

Custom Icons, Anchoring, Dragging (Android), Custom Info WindowsCustom Icons, Anchoring, Dragging (Android), Custom Info Windows

Polylines (geodesic), Polygons, and Circles Polylines (geodesic)

Ground and Tile Ground

Traffic and Indoor (Android)Traffic and Indoor (Android)



Before you start kaskaderc

Things you need to do to use the APIs.



Getting started kaskaderc

Services Section

API Access section



Getting started kaskaderc

API Access section

13:4A:53:3D:F7:B6:20:...:2C:01:58:F2:C8:36:6A;com.example.mapdemo

◦ OS X and Linux: ~/.android/◦ Windows Vista and Windows 7: C:\Users\your_user_name\.android\

Certificatedebug

releasehttp://developer.android.com/tools/publishing/app-signing.html#releasemode

%> keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Getting the fingerprint


http://developer.android.com/tools/publishing/app-signing.html#releasemode










• MapView v1 keys will NOT work with the new v2 API

• The key is generated in the Google APIs Console, NOT the Google Play Developer Console


The important NOT s kaskaderc


iOS demo

Kasia Derc-Fenske | Google+Kasia Derc-Fenske kaskaderc



Demo time ! kaskaderc


Run it!


iOS demo code kaskaderc



GIS Trivia 1 kaskaderc

Designed by Ben King (http://thenounproject.com/Kinger/)


http://thenounproject.com/Kinger



GIS Trivia 1 kaskaderc

The earth is not flat!



What is a geodesic ? kaskaderc

•the path followed by an object with not forces acting on it

• the “straightest” you can get in curved space

•it’s about pinning a string to two points on earth and making it as short as possible



Going from New York to Rome kaskaderc



Android demo



How does it work: Google Play .apk kaskaderc


What we need:Kasia Derc-Fenske | Google+Kasia Derc-Fenske

Setting up ADT kaskaderc

• ADT: http://developer.android.com/sdk/• Google Play Services• Android Support Library

Note: Sample code is also bundled with Google Play Services SDK


http://developer.android.com/sdk/index.html

http://developer.android.com/sdk/index.html


Android Support Library kaskaderc

• Use SupportMapFragment is targeting API 11 or below• Also required for example app



Setting up ADT kaskaderc

• import sdk/extras/google/google_play_services/libproject/google-play-services_libsdk/extras/google/google_play_services/samples/maps

• add android/compatibility/v4/android-support-v4.jar as an external jar



AndroidManifest.xml kaskaderc



Become a developer kaskaderc

Plug in a physical phone

Enable debugging and Run!



GIS Trivia 2: Projections kaskaderc






GIS Trivia 2: XKCD Mercator kaskaderc

source: http://imgs.xkcd.com/comics/map_projections.png


http://imgs.xkcd.com/comics/map_projections.png



GIS Trivia 2: Mercator kaskaderc

http://kaskaderc.github.com/maps_samples/projections/mercator.html


http://kaskaderc.github.com/maps_samples/projections/gallpeters.html





What’s available kaskaderc

Android Maps Api Features


<fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:map="http://schemas.android.com/apk/res-auto" android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" class="com.google.android.gms.maps.MapFragment" map:cameraBearing="12.5" map:cameraTargetLat="53.012098" map:cameraTargetLng="18.593674" map:cameraTilt="45" map:cameraZoom="14" map:mapType="normal" map:uiCompass="false" map:uiRotateGestures="true" map:uiScrollGestures="true" map:uiTiltGestures="true" map:uiZoomControls="true" map:uiZoomGestures="true" />


The simplest implementation kaskaderc

public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }}


http://schemas.android.com/apk/res/android

http://schemas.android.com/apk/res/android

http://schemas.android.com/apk/res-auto

http://schemas.android.com/apk/res-auto


Android Maps API: deeper dive kaskaderc

public class MainActivity extends android.support.v4.app.FragmentActivity { private GoogleMap map; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);

map = ((SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map)).getMap(); }...

http://developer.android.com/reference/

com/google/android/gms/maps/package-summary.html


http://developer.android.com/reference/com/google/android/gms/maps/package-summary.html

http://developer.android.com/reference/com/google/android/gms/maps/package-summary.html


1. Base Maps in 3D kaskaderc



Camera positioning kaskaderc

static final CameraPosition BONDI = new CameraPosition.Builder().target(new LatLng(-33.891614, 151.276417)) .zoom(15.5f) .bearing(300) .tilt(50) .build();

CameraUpdate cameraUpdate = CameraUpdateFactory.newCameraPosition(BONDI)); CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLng(new LatLng(-33.89, 151.27)); CameraUpdate cameraUpdate = CameraUpdateFactory.scrollBy(50, 0); CameraUpdate cameraUpdate = CameraUpdateFactory.zoomTo(10); // Or In/Out/By

map.moveCamera(cameraUpdate); map.animateCamera(cameraUpdate);

sample code from CameraDemoActivity.java



2. Indoor floor plans kaskaderc

map:cameraTargetLat="47.35"map:cameraTargetLng="8.523"map:cameraTilt="45"map:cameraZoom="18"map:mapType="normal"



3. Traffic and My Location kaskaderc

mMap. setTrafficEnabled(true);

LayersDemoActivity.java



4. Custom Overlays kaskaderc

34

mGroundOverlay = mMap.addGroundOverlay(new GroundOverlayOptions() .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922)) .anchor(0, 1) .position(NEWARK, 8600f, 6500f));

sample code from GroundOverlayDemoActivity.java



5. Markers & InfoWindows kaskaderc



5. Markers and Info Windows kaskaderc

map.addMarker(new MarkerOptions().position(new LatLng(37.5, 122.5)).title("Title") // optional.snippet("And a Snippet!") // optional.draggable(true) // optional.visible(true)); // optional




map.addMarker(new MarkerOptions() .position(new LatLng(40, 40)) .icon(BitmapDescriptorFactory.defaultMarker( BitmapDescriptorFactory.HUE_AZURE))); // float hue 0-359

map.addMarker(new MarkerOptions() .position(new LatLng(50, 50)) .icon(BitmapDescriptorFactory .fromResource(R.drawable.marker)));// or fromAsset(String), fromBitmap(Bitmap), fromFile(String)

map.addMarker(new MarkerOptions() .position(new LatLng(60, 60)) .icon(BitmapDescriptorFactory.fromResource(R.drawable.marker_shadow)) .anchor(.23f, 1)); // ratio of width & height from top-left corner




(1.0,0.0)

(1.0,1.0)(0.5,1.0)[default]

(0.0,1.0)

(0.8,0.4)

← u →

← v

→



Custom info windows kaskaderc

• Create a InfoWindowAdapter

• Attach the adapter to the map

class CustomInfoWindowAdapter implements InfoWindowAdapter { @Override public View getInfoContents(Marker marker) { return null; // return null for default InfoWindow }

@Override public View getInfoWindow(Marker marker) { return null; // call getInfoContents }}



Marker and Info Window Events! kaskaderc

• Defining Listeners

• Registering Listeners

• Receiving Events

public class MarkerActivity extends android.support.v4.app.FragmentActivityimplements OnMarkerClickListener, OnInfoWindowClickListener, OnMarkerDragListener {...

map.setOnMarkerClickListener(this);map.setOnInfoWindowClickListener(this);map.setOnMarkerDragListener(this);

public void onMarkerDrag(Marker marker) {}public void onMarkerDragEnd(Marker marker) {}public void onMarkerDragStart(Marker marker) {}public void onInfoWindowClick(Marker marker) {}public boolean onMarkerClick(Marker marker) {}



6. Polylines & Polygons kaskaderc



Slide’s title kaskaderc

• Polyline

• Polygon

map.addPolyline(new PolylineOptions() .add(LHR, AKL, LAX, JFK, LHR) // LatLng... or addAll(List<LatLng>) .width(5) .color(Color.BLUE) .geodesic(true));

map.addPolygon(new PolygonOptions() .addAll(coords) // List<LatLng> .addHole(hole) // List<LatLng> .fillColor(Color.CYAN) .strokeColor(Color.BLUE) .strokeWidth(5) .geodesic(true));



6. Fragment Support kaskaderc



6. Fragment Support kaskaderc

MultiMapDemoActivity.javapublic class MultiMapDemoActivity extends android.support.v4.app.FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.multimap_demo); }} <LinearLayout xmlns:android=...

xmlns:map=... android:id="@+id/map_container" ...

<fragment android:id="@+id/map1" <LinearLayout

android:id="@+id/map_container2" <fragment android:id="@+id/map2"



7. Tile Overlays



Hello Map and getting started kaskaderc

Shortcuts: Kick-start Google Maps Android API v2 Development

http://github.com/googlemaps/hellomap-android

https://www.youtube.com/watch?v=VecPbAK5U4M







GIS Trivia 3: Projections c.d. kaskaderc







GIS Trivia 3: XKCD Gall-Peters





GIS Trivia 3: Gall - Peters projection kaskaderc








GIS Trivia 3: XKCD and Projections kaskaderc

http://xkcd.com/977/








Maps SDK for iOS Features and Sample kaskaderc

Maps SDK for iOS Features



1. Basic Maps in 3D, map types, traffic layer kaskaderc



2. Polylines, Custom Markers, Ground Overlay... kaskaderc



Let’s check sample projects! kaskaderc

Instead or reiterating sample code let’s see how to use storyboards and look at the event model.


getting started project


Getting started iOS project kaskaderc



Using storyboards kaskaderc



#import <UIKit/UIKit.h>#import <GoogleMaps/GoogleMaps.h>

@interface googleMainController : UIViewController<GMSMapViewDelegate>@property (weak, nonatomic) IBOutlet UILabel *mapLabel;@property (strong, nonatomic) IBOutlet GMSMapView *googleMap;...@end

- (void)viewDidLoad{ [super viewDidLoad]; self.googleMap.camera = [GMSCameraPosition cameraWithLatitude:41.9015141 longitude:12.4607737 zoom:15 bearing:10.f viewingAngle:37.5f]; self.googleMap.delegate = self; }

Protocols and Delegates



From the Controller’s perspective kaskaderc

@interface googleMainController : UIViewController<GMSMapViewDelegate>

declared in GMSMapView.h

self.googleMap.delegate = self;

We will implement some of the Map delegate functions

We will tell the map we will be it’s delegate


@protocol GMSMapViewDelegate <NSObject>


GMS Map View Delegate methods kaskaderc

(void)mapView:(GMSMapView *)mapView didChangeCameraPosition:(GMSCameraPosition *)position;

- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate;

- (void)mapView:(GMSMapView *)mapView didLongPressAtCoordinate:(CLLocationCoordinate2D)coordinate;

(BOOL)mapView:(GMSMapView *)mapView didTapMarker:(id<GMSMarker>)marker;

- (void)mapView:(GMSMapView *)mapView didTapInfoWindowOfMarker:(id<GMSMarker>)marker;



Logging activity kaskaderc

- (void)mapView:(GMSMapView *)mapView didChangeCameraPosition:(GMSCameraPosition *)position { NSLog(@"You changed camera position to zoom %f, target: %f, %f ", position.zoom, position.targetAsCoordinate.latitude, position.targetAsCoordinate.longitude);

}

- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate { NSLog(@"You tapped at %f,%f", coordinate.latitude, coordinate.longitude);}



Zoom in out buttons kaskaderc

- (IBAction)tappedZoomOut:(UIButton *)sender { CGFloat currentZoom = self.googleMap.camera.zoom; if (currentZoom > kGMSMinZoomLevel) { self.googleMap.camera = [GMSCameraPosition cameraWithLatitude:self.googleMap.camera.target.latitude longitude:self.googleMap.camera.target.longitude zoom:currentZoom-1 bearing:self.googleMap.camera.bearing viewingAngle:self.googleMap.camera.viewingAngle]; }}

https://github.com/kaskaderc/ios_samples/


https://github.com/kaskaderc/ios_samples/tree/master/MapWithZoomInOutButtons

https://github.com/kaskaderc/ios_samples/tree/master/MapWithZoomInOutButtons


Visualizing JSON data kaskaderc

Earthquakes on the Move



Earthquakes on the Move storyboard kaskaderc



Earthquakes on the Move code kaskaderc

#define kUSGSEarthQuakes [NSURL URLWithString:@"http://earthquake.usgs.gov/earthquakes/feed/geojson/all/hour"]

#import <UIKit/UIKit.h>

@interface EQTableViewController : UITableViewController@property (nonatomic, strong) IBOutlet UILabel *quakeLabel;@property (nonatomic, strong) NSString *quakeName;@property (nonatomic, strong) IBOutlet UITableView *tableView;@property (nonatomic, strong) NSData* data;@property (nonatomic, strong) NSDictionary* json;

@end

@interface EQTableViewController (){ NSMutableArray *quakeArray; NSMutableArray *markerArray;}@end

- (void)viewDidLoad{ [super viewDidLoad]; [self fetchData];}


http://earthquake.usgs.gov/earthquakes/feed/geojson/all/hour





iOS Demo App : Earthquakes on the Move kaskaderc

Shortcuts: Earthquakes on the Movehttps://www.youtube.com/watch?v=xZt5ZIWWUd0

Find out by watching Maps Developer Shortcuts!


https://www.youtube.com/watch?v=xZt5ZIWWUd0

https://www.youtube.com/watch?v=xZt5ZIWWUd0


Launching native Google Maps app kaskaderc

[[UIApplication sharedApplication] canOpenURL: [NSURL URLWithString:@"comgooglemaps://"]];

comgooglemaps://?saddr=Google+Inc,+8th+Avenue,+New+York,+NY&daddr=John+F.+Kennedy+International+Airport,+Van+Wyck+Expressway,+Jamaica,+New+York&directionsmode=transit

Uri uri = Uri.parse("http://maps.google.com/maps?saddr=FROM_LOCATION&daddr=TO_LOCATION");Uri uri = Uri.parse("geo:13.070984,80.253639");Intent in = new Intent(Intent.ACTION_VIEW, uri);startActivity(in);

Android intents

iOS URL Scheme


http://maps.google.com/maps?saddr=20.344,34.34&daddr=20.5666,45.345

http://maps.google.com/maps?saddr=20.344,34.34&daddr=20.5666,45.345


Google Maps Web Services - Server side kaskaderc

2500 requests per dayDirections API: Directions for several modes of transportation (transit, driving, walking or cycling) between locations, including waypoints.

Distance Matrix API: Travel distance and time for a matrix of locations.

Elevation API: Elevation data for all locations on the surface of the earth, including depth locations on the ocean floor.

Geocoding API: Forward and reverse geocoding.

Time Zone API: Time offset data for locations on Earth.

Places API: Detailed information about (80M+) places across a wide range of categories.

100K requests per 24 hour period ( if billing is enabled )



GIS Trivia 4: Maps Surprises kaskaderc






GIS Trivia 4: be surprised



GIS Trivia 4: True size of Africa by Kai Krause kaskaderc

full image: http://www.learnnc.org/lp/multimedia/16023


http://www.learnnc.org/lp/multimedia/16023

http://www.learnnc.org/lp/multimedia/16023


Getting in touch kaskaderc

https://developers.google.com/maps/forum/


https://developers.google.com/maps/forum/?hl=en

https://developers.google.com/maps/forum/?hl=en


Issue tracker kaskaderc

code.google.comIssue tracker



Asking questions kaskaderc



Staying tuned kaskaderc

developers.google.com/maps

Google Maps API (G+ & Twitter)

Google Geo Developers Blog

Google Maps API Developers Live


Add <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>


Extra tips kaskaderc

into AndroidManifest.xml to ensure correct behavior under poor connectivity conditions


kaskaderc@kdf +Kasia Derc-Fenske // Google

Kasia Derc-Fenske

Thank you!

@ +alfredomorresi Alfredo Morresi // Google Italy rainbowbreeze


google maps mobile apis by kasia derc-fenske

Technology