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
   J...
Mobile Mapping Options
     Google Geo APIs
Maps in Browser

          1. Open a browser
          2. Go to YourSite.com
          3. Use Static Maps
             API...
Static Maps API
        HTTP (RESTful) service for retrieving map images
        Fast and lightweight
        Suitable for...
MapView on Android
 Code
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import androi...
Map Kit on iPhone
 Code
#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface MapViewController : UIViewController...
Pros and Cons of Native APIs

    Pro:
       Native app look and feel
       Distribution via Market/App Store
       Int...
Feature Comparisons of Maps APIs
 Features             Google   Google Maps Google    Google Static
                      ...
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

...
Javascript API V3 Map: Easy!
   var myLatlng = new google.maps.LatLng(lat, long);

   var myOpt = {
      zoom: 8,
      c...
Javascript API V3 Map
Embed Map in Android App
 public class MyMapActivity extends Activity {
 private WebView webView;
 private static final St...
Map in Android App in Eclipse
Embed Map in iPhone App
 @interface MyMapController : UIViewController {
  IBOutlet UIWebView *webView;
 }


 - (void) vie...
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...
ขอบคุณ! Twitter @sshen

  Q&A

  Links:
       http://code.google.
       com/apis/maps/documentation/javascript/
       h...
Maps API on_mobile_dev_festbangkok
Upcoming SlideShare
Loading in …5
×

Maps API on_mobile_dev_festbangkok

2,864 views

Published on

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

No Downloads
Views
Total views
2,864
On SlideShare
0
From Embeds
0
Number of Embeds
7
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/

×