Maps API on_mobile_dev_festbangkok


Published on

1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Maps API on_mobile_dev_festbangkok

  1. 1. Maps API on Mobile DevFest Oct 2010 Bangkok Shawn Shen @sshen Developer Advocate
  2. 2. Agenda Mobile Mapping Overview Embed Javascript API in Native Apps Javascript API V3 Awesomeness
  3. 3. Mobile Mapping Options Browsers Static Maps API Native APIs MapView on Android Map Kit on iPhone Javascript API V3
  4. 4. Mobile Mapping Options Google Geo APIs
  5. 5. Maps in Browser 1. Open a browser 2. Go to 3. Use Static Maps API or Javascript API
  6. 6. 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
  7. 7. 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; } }
  8. 8. 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]; }
  9. 9. 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
  10. 10. 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
  11. 11. Embed Javascript API V3 in Native Apps Javascript API V3 map Android iPhone
  12. 12. 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
  13. 13. 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);
  14. 14. Javascript API V3 Map
  15. 15. 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); }
  16. 16. Map in Android App in Eclipse
  17. 17. 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]; }
  18. 18. Map in iPhone App in XCode
  19. 19. iPhone App in XCode (Demo)
  20. 20. More Javascript API V3 Awesomeness HTML5 deck at /Users/shawnshen/Desktop/devfest/
  21. 21. Timeline of Maps Javascript API V3
  22. 22. Key Take-Aways Recommended Mobile Mapping Embed Javascript map in native apps Maps Javascript API V3 is awesome เท Lots of features เจง Innovation
  23. 23. ขอบคุณ! Twitter @sshen Q&A Links: com/apis/maps/documentation/javascript/