View
1.300
Download
7
Category
Preview:
DESCRIPTION
A quick guide on how to get started with Google Maps Android API v2 and Google Maps SDK for iOS with some GIS fun facts that can be learnt along the way. Starting with a quick overview of the key features of both SDK. followed by setup instructions, code snippets and some tips on utilizing geotagged information. Maps Rock!
Citation preview
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
2Friday, March 22, 13
3Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Goal of this presto kaskaderc
4Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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)
5Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Before you start kaskaderc
Things you need to do to use the APIs.
6Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Getting started kaskaderc
Services Section
API Access section
7Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
8Friday, March 22, 13
• 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
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
The important NOT s kaskaderc
9Friday, March 22, 13
iOS demo
Kasia Derc-Fenske | Google+Kasia Derc-Fenske kaskaderc
10Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Demo time ! kaskaderc
11Friday, March 22, 13
Run it!
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
iOS demo code kaskaderc
12Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 1 kaskaderc
Designed by Ben King (http://thenounproject.com/Kinger/)
13Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 1 kaskaderc
The earth is not flat!
14Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
15Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Going from New York to Rome kaskaderc
16Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske kaskaderc
Android demo
17Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
How does it work: Google Play .apk kaskaderc
18Friday, March 22, 13
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
19Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Android Support Library kaskaderc
• Use SupportMapFragment is targeting API 11 or below• Also required for example app
20Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
21Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
AndroidManifest.xml kaskaderc
22Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Become a developer kaskaderc
Plug in a physical phone
Enable debugging and Run!
23Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 2: Projections kaskaderc
Designed by Ben King (http://thenounproject.com/Kinger/)
24Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 2: XKCD Mercator kaskaderc
source: http://imgs.xkcd.com/comics/map_projections.png
25Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 2: Mercator kaskaderc
http://kaskaderc.github.com/maps_samples/projections/mercator.html
26Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
What’s available kaskaderc
Android Maps Api Features
27Friday, March 22, 13
<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" />
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
The simplest implementation kaskaderc
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }}
28Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
29Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
1. Base Maps in 3D kaskaderc
30Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
31Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
2. Indoor floor plans kaskaderc
map:cameraTargetLat="47.35"map:cameraTargetLng="8.523"map:cameraTilt="45"map:cameraZoom="18"map:mapType="normal"
32Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
3. Traffic and My Location kaskaderc
mMap. setTrafficEnabled(true);
LayersDemoActivity.java
33Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
34Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
5. Markers & InfoWindows kaskaderc
35Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
36Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
5. Markers and Info Windows kaskaderc
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
37Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
5. Markers and Info Windows kaskaderc
(1.0,0.0)
(1.0,1.0)(0.5,1.0)[default]
(0.0,1.0)
(0.8,0.4)
← u →
← v
→
38Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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 }}
39Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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) {}
40Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
6. Polylines & Polygons kaskaderc
41Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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));
42Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
6. Fragment Support kaskaderc
43Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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"
44Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske kaskaderc
7. Tile Overlays
45Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
46Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 3: Projections c.d. kaskaderc
Designed by Ben King (http://thenounproject.com/Kinger/)
47Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske kaskaderc
source: http://imgs.xkcd.com/comics/map_projections.png
GIS Trivia 3: XKCD Gall-Peters
48Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 3: Gall - Peters projection kaskaderc
http://kaskaderc.github.com/maps_samples/projections/gallpeters.html
49Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 3: XKCD and Projections kaskaderc
http://xkcd.com/977/
source: http://imgs.xkcd.com/comics/map_projections.png
50Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Maps SDK for iOS Features and Sample kaskaderc
Maps SDK for iOS Features
51Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
1. Basic Maps in 3D, map types, traffic layer kaskaderc
52Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
2. Polylines, Custom Markers, Ground Overlay... kaskaderc
53Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Let’s check sample projects! kaskaderc
Instead or reiterating sample code let’s see how to use storyboards and look at the event model.
54Friday, March 22, 13
getting started project
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Getting started iOS project kaskaderc
55Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Using storyboards kaskaderc
56Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske 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
57Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
58Friday, March 22, 13
@protocol GMSMapViewDelegate <NSObject>
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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;
59Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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);}
60Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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/
61Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Visualizing JSON data kaskaderc
Earthquakes on the Move
62Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Earthquakes on the Move storyboard kaskaderc
63Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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];}
64Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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!
65Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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
66Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
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 )
67Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 4: Maps Surprises kaskaderc
Designed by Ben King (http://thenounproject.com/Kinger/)
68Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske kaskaderc
GIS Trivia 4: be surprised
69Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
GIS Trivia 4: True size of Africa by Kai Krause kaskaderc
full image: http://www.learnnc.org/lp/multimedia/16023
70Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Getting in touch kaskaderc
https://developers.google.com/maps/forum/
71Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Issue tracker kaskaderc
code.google.comIssue tracker
72Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Asking questions kaskaderc
73Friday, March 22, 13
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Staying tuned kaskaderc
developers.google.com/maps
Google Maps API (G+ & Twitter)
Google Geo Developers Blog
Google Maps API Developers Live
74Friday, March 22, 13
Add <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Kasia Derc-Fenske | Google+Kasia Derc-Fenske
Extra tips kaskaderc
into AndroidManifest.xml to ensure correct behavior under poor connectivity conditions
75Friday, March 22, 13
kaskaderc@kdf +Kasia Derc-Fenske // Google
Kasia Derc-Fenske
Thank you!
@ +alfredomorresi Alfredo Morresi // Google Italy rainbowbreeze
76Friday, March 22, 13
Recommended