Maps API on_mobile_dev_festbangkok

2,809 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,809
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
72
Comments
1
Likes
0
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 YourSite.com 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 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/
  7. 7. 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; } }
  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 = @"http://bit.ly/aw2bxu"; 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: http://code.google. com/apis/maps/documentation/javascript/ http://beyond-markers.appspot.com/ http://code.google.com/apis/ajax/playground/

×