Maps API on_mobile_dev_festbangkok
Upcoming SlideShare
Loading in...5

Maps API on_mobile_dev_festbangkok






Total Views
Views on SlideShare
Embed Views



3 Embeds 5 3 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Maps API on_mobile_dev_festbangkok Maps API on_mobile_dev_festbangkok Presentation Transcript

    • Maps API on Mobile DevFest Oct 2010 Bangkok Shawn Shen @sshen Developer Advocate
    • Agenda Mobile Mapping Overview Embed Javascript API in Native Apps Javascript API V3 Awesomeness
    • Mobile Mapping Options Browsers Static Maps API Native APIs MapView on Android Map Kit on iPhone Javascript API V3
    • Mobile Mapping Options Google Geo APIs
    • Maps in Browser 1. Open a browser 2. Go to 3. Use Static Maps API or Javascript API
    • Static Maps API HTTP (RESTful) service for retrieving map images Fast and lightweight Suitable for all internet enabled devices sensor=false&size=255x150&markers=size:mid|label:! |37.4441,-122.163|&zoom=15
    • MapView on Android Code import; import; 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 feel Distribution via Market/App Store Integration with device sensors Con: Multiple code bases Updates require download/install Lack of latest map features
    • Feature Comparisons of Maps APIs Features Google Google Maps Google Google Static Maps on iPhone Maps on Maps API API V3 Android Add a Map X X X X Markers X X X X Geocoding X X X Polygons/Polylines X X (4.0 SDK+) X X Custom Map Tiles X Styled Maps X KML/GeoRSS X Layers Directions X Street View X X X
    • Embed Javascript API V3 in Native Apps Javascript API V3 map Android iPhone
    • Embed Javascript API in Native App Native app: Android/iPhone Embedded browser Use 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 = @""; 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 Mapping Embed Javascript map in native apps Maps Javascript API V3 is awesome เท Lots of features เจง Innovation
    • ขอบคุณ! Twitter @sshen Q&A Links: com/apis/maps/documentation/javascript/