Google Maps Mobile APIs by Kasia Derc-Fenske

Kasia Derc-Fenske

Google Maps Mobile APIs

@kaskaderc +Kasia Derc-Fenske // Google
kaskaderc

Friday, March 22, 13 1

Google Maps Mobile APIs
+Kasia Derc-Fenske kaskaderc Kasia Derc-Fenske | Google

Google Maps Google Maps
Android API v2 SDK for iOS


Goal of this presto


Key features

Android iOS

Development: Xcode 4.5+, iOS SDK 6.+.
API level 12 (level 4 w/Support Library),
Platforms Target platform: iOS 5.1
GLES 2

Vector Maps 3D Buildings, Roadmap, Hybrid Map, Satellite Imagery, Terrain Map

Camera Positioning Zoom, Pan, Tilt, Bearing, Animation

Markers & Info
Custom Icons, Anchoring, Dragging (Android), Custom Info Windows
Windows

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

Overlays Ground and Tile Ground

Layers Traﬃc and Indoor (Android)


Before you start

Things you need to do to
use the APIs.


Getting started

Services Section

API Access section


Getting started

API Access section

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

Certificate
debug
◦ OS X and Linux: ~/.android/
◦ Windows Vista and Windows 7: C:Usersyour_user_name.android
release
http://
developer.android.com/
tools/publishing/app-
signing.html#releasemo
Getting the fingerprint de

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


The important NOT s

• 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



iOS demo


Demo time !


iOS demo code

Run it!


GIS Trivia 1

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


GIS Trivia 1

The earth is not flat!


What is a geodesic ?

• 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



Android demo


How does it work: Google Play .apk


Setting up ADT

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

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


Android Support Library

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


Setting up ADT

• import
sdk/extras/google/google_play_services/libproject/google-
play-services_lib
sdk/extras/google/google_play_services/samples/maps
• add
android/compatibility/v4/android-support-v4.jar
as an external jar


AndroidManifest.xml


Become a developer

Plug in a physical phone

Enable debugging and Run!


GIS Trivia 2: Projections



GIS Trivia 2: XKCD Mercator

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


GIS Trivia 2: Mercator

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


What’s available

Android Maps Api
Features


The simplest implementation

<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" public class MainActivity extends Activity {
map:uiScrollGestures="true"
@Override
map:uiTiltGestures="true" protected void onCreate(Bundle savedInstanceState) {
map:uiZoomControls="true"
super.onCreate(savedInstanceState);
map:uiZoomGestures="true" /> setContentView(R.layout.activity_main);
}
}


Android Maps API: deeper dive

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

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

public class MainActivity extends android.support.v4.app.FragmentActivity {
private GoogleMap map;

protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);

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


1. Base Maps in 3D


Camera positioning

sample code from CameraDemoActivity.java
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);


2. Indoor floor plans

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


3. Traffic and My Location

LayersDemoActivity.java

mMap.
setTrafficEnabled(true);


4. Custom Overlays

sample code from
GroundOverlayDemoActivity.java

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

34

5. Markers & InfoWindows


5. Markers and Info Windows

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



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

.icon(BitmapDescriptorFactory
.fromResource(R.drawable.marker)));
// or fromAsset(String), fromBitmap(Bitmap), fromFile(String)

.icon(BitmapDescriptorFactory.fromResource(R.drawable.marker_shadow))
.anchor(.23f, 1)); // ratio of width & height from top-left corner



(1.0,0.0)
←u→

←v→
(0.8,0.4)

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


Custom info windows

• Create a InfoWindowAdapter

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
}
}

• Attach the adapter to the map


Marker and Info Window Events!

• Deﬁning Listeners
public class MarkerActivity extends android.support.v4.app.FragmentActivity
implements OnMarkerClickListener, OnInfoWindowClickListener,
OnMarkerDragListener {
...

• Registering Listeners
map.setOnMarkerClickListener(this);
map.setOnInfoWindowClickListener(this);
map.setOnMarkerDragListener(this);

• Receiving Events
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


Slide’s title

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

• Polygon

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


6. Fragment Support

MultiMapDemoActivity.java
public class MultiMapDemoActivity extends
android.support.v4.app.FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.multimap_demo);
}
} <LinearLayout xmlns:android=...
xmlns:map=...
android:id="@+id/map_container"
...
<fragment
<LinearLayout android:id="@+id/map1"
android:id="@+id/map_container2" <fragment
android:id="@+id/map2"


7. Tile Overlays


Hello Map and getting started

Shortcuts: Kick-start Google Maps Android API v2 Development
https://www.youtube.com/watch?v=VecPbAK5U4M

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


GIS Trivia 3: Projections c.d.



GIS Trivia 3: XKCD Gall-Peters



GIS Trivia 3: Gall - Peters projection

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


GIS Trivia 3: XKCD and Projections

http://xkcd.com/977/



Maps SDK for iOS Features and Sample

Maps SDK for iOS Features


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


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


Let’s check sample projects!

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


Getting started iOS project

getting started project


Using storyboards


Protocols and Delegates

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

}


From the Controller’s perspective

We will implement some of the Map delegate functions
@interface googleMainController : declared in
UIViewController<GMSMapViewDelegate> GMSMapView.h

We will tell the map we will be it’s delegate
self.googleMap.delegate = self;


GMS Map View Delegate methods

@protocol GMSMapViewDelegate <NSObject>
(void)mapView:(GMSMapView *)mapView
didChangeCameraPosition:(GMSCameraPosition *)position;

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

didLongPressAtCoordinate:(CLLocationCoordinate2D)coordinate;

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

didTapInfoWindowOfMarker:(id<GMSMarker>)marker;


Logging activity

- (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

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

- (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];
}
}


Visualizing JSON data

Earthquakes on the Move


Earthquakes on the Move storyboard


Earthquakes on the Move code

#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 (){ - (void)viewDidLoad
NSMutableArray *quakeArray; {
NSMutableArray *markerArray; [super viewDidLoad];
} [self fetchData];
@end }


iOS Demo App : Earthquakes on the Move

Find out by watching Maps Developer
Shortcuts!

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


Launching native Google Maps app

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

iOS URL Scheme
[[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


Google Maps Web Services - Server side

100K requests per 24 hour period ( if billing is enabled )
Places API: Detailed information about (80M+) places
across a wide range of categories.

2500 requests per day
Directions 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 ﬂoor.

Geocoding API: Forward and reverse geocoding.

Time Zone API: Time oﬀset data for locations on Earth.


GIS Trivia 4: Maps Surprises



GIS Trivia 4: be surprised


GIS Trivia 4: True size of Africa by Kai Krause

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


Getting in touch

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

Issue tracker

Issue tracker
code.google.com


Asking questions


Staying tuned

developers.google.com/maps
Google Maps API (G+ & Twitter)

Google Geo Developers Blog

Google Maps API Developers Live


Extra tips

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

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


Kasia Derc-Fenske

Thank you!
@kdf +Kasia Derc-Fenske // Google
kaskaderc

@ +alfredomorresi Alfredo Morresi // Google Italy
rainbowbreeze


Google Maps Mobile APIs by Kasia Derc-Fenske

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Codemotion

Mais de Codemotion (20)

Último

Último (20)

Google Maps Mobile APIs by Kasia Derc-Fenske