Maps API on_mobile_dev_festbangkok
Transcript of Maps API on_mobile_dev_festbangkok
![Page 1: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/1.jpg)
![Page 2: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/2.jpg)
Maps API on MobileDevFest Oct 2010 Bangkok
Shawn Shen @sshenDeveloper Advocate
![Page 3: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/3.jpg)
Agenda
Mobile Mapping OverviewEmbed Javascript API in Native AppsJavascript API V3 Awesomeness
![Page 4: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/4.jpg)
Mobile Mapping OptionsBrowsersStatic Maps APINative APIs
MapView on AndroidMap Kit on iPhone
Javascript API V3
![Page 5: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/5.jpg)
Mobile Mapping Options
Google Geo APIs
![Page 6: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/6.jpg)
Maps in Browser
1. Open a browser2. Go to YourSite.com3. Use Static Maps
API or Javascript API
![Page 7: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/7.jpg)
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/
![Page 8: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/8.jpg)
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; }}
![Page 9: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/9.jpg)
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];}
![Page 10: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/10.jpg)
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
![Page 11: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/11.jpg)
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
![Page 12: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/12.jpg)
Embed Javascript API V3 in Native AppsJavascript API V3 mapAndroidiPhone
![Page 13: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/13.jpg)
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
![Page 14: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/14.jpg)
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);
![Page 15: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/15.jpg)
Javascript API V3 Map
![Page 16: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/16.jpg)
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);}
![Page 17: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/17.jpg)
Map in Android App in Eclipse
![Page 18: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/18.jpg)
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];}
![Page 19: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/19.jpg)
Map in iPhone App in XCode
![Page 20: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/20.jpg)
iPhone App in XCode (Demo)
![Page 21: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/21.jpg)
More Javascript API V3 Awesomeness
HTML5 deck at /Users/shawnshen/Desktop/devfest/
![Page 22: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/22.jpg)
Timeline of Maps Javascript API V3
![Page 23: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/23.jpg)
Key Take-Aways
Recommended Mobile MappingEmbed Javascript map in native apps
Maps Javascript API V3 is awesome เท Lots of features
เจง Innovation
![Page 24: Maps API on_mobile_dev_festbangkok](https://reader034.fdocuments.net/reader034/viewer/2022052410/554be4c0b4c9056b348b4917/html5/thumbnails/24.jpg)
ขอบคุณ! 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/