Maps API on MobileDevFest Oct 2010 Bangkok

Shawn Shen @sshenDeveloper Advocate

Agenda

Mobile Mapping OverviewEmbed Javascript API in Native AppsJavascript API V3 Awesomeness

Mobile Mapping OptionsBrowsersStatic Maps APINative APIs

MapView on AndroidMap Kit on iPhone

Javascript API V3

Mobile Mapping Options

Google Geo APIs

Maps in Browser

1. Open a browser2. Go to YourSite.com3. Use Static Maps

API or Javascript API

Static Maps APIHTTP (RESTful) service for retrieving map images Fast and lightweight Suitable for all internet enabled devices

http://maps.google.com/maps/api/staticmap?sensor=false&size=255x150&markers=size:mid|label:!|37.4441,-122.163|&zoom=15

http://code.google.com/apis/maps/documentation/staticmaps/

MapView on Android Code

import com.google.android.maps.MapActivity;import com.google.android.maps.MapView;import android.os.Bundle;

public class MapsActivity extends MapActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } @Override protected boolean isRouteDisplayed() { return false; }}

Map Kit on iPhone Code#import <UIKit/UIKit.h>#import <MapKit/MapKit.h>

@interface MapViewController : UIViewController<MKMapViewDelegate> { IBOutlet UITextField *addressField; IBOutlet UIButton *goButton; IBOutlet MKMapView *mapView;}

- (void)applicationDidFinishLaunching:(UIApplication *) application { mapViewController = [[MapViewController alloc] initWithNibName:@".."];

[window addSubview:mapViewController.view]; [window makeKeyAndVisible];}

Pros and Cons of Native APIs

Pro:Native app look and feelDistribution via Market/App StoreIntegration with device sensors

Con:Multiple code basesUpdates require download/install Lack of latest map features

Feature Comparisons of Maps APIsFeatures Google

Maps API V3

Google Maps on iPhone

Google Maps on Android

Google Static Maps API

Add a Map X X X X

Markers X X X X

Geocoding X X XPolygons/Polylines X X (4.0 SDK+) X X

Custom Map Tiles X

Styled Maps X

KML/GeoRSS Layers

X

Directions X

Street View X X X

Embed Javascript API V3 in Native AppsJavascript API V3 mapAndroidiPhone

Embed Javascript API in Native AppNative app: Android/iPhoneEmbedded browserUse Maps Javascript API V3

Best of Both Worlds: Native Apps + Maps Javascript API V3 features

Javascript API V3 Map: Easy!

var myLatlng = new google.maps.LatLng(lat, long);

var myOpt = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }

var map = new google.maps.Map($.("map"), myOpt);

Javascript API V3 Map

Embed Map in Android App

public class MyMapActivity extends Activity {

private WebView webView; private static final String MAP_URL = "..."; public void onCreate(Bundle savedInstanceState) { setContentView(R.layout.main); setupWebView(); }} private void setupWebView(){webView.setWebViewClient(new WebViewClient());

webView.loadUrl(MAP_URL);}

Map in Android App in Eclipse

Embed Map in iPhone App@interface MyMapController : UIViewController {

IBOutlet UIWebView *webView;}

- (void) viewDidLoad {NSString *url = @"http://bit.ly/aw2bxu";NSURLRequest *request = [NSURLRequest a requestWithURL:[NSURL URLWithString:url]];

[webView loadRequest:request];}

Map in iPhone App in XCode

iPhone App in XCode (Demo)

More Javascript API V3 Awesomeness

HTML5 deck at /Users/shawnshen/Desktop/devfest/

Timeline of Maps Javascript API V3

Key Take-Aways

Recommended Mobile MappingEmbed Javascript map in native apps

Maps Javascript API V3 is awesome เท Lots of features

เจง Innovation

ขอบคุณ! Twitter @sshen

Q&A

Links:

http://code.google.com/apis/maps/documentation/javascript/

http://beyond-markers.appspot.com/

http://code.google.com/apis/ajax/playground/