2. Maps API on Mobile
DevFest Oct 2010 Bangkok
Shawn Shen @sshen
Developer Advocate

3. Agenda
Mobile Mapping Overview
Embed Javascript API in Native Apps
Javascript API V3 Awesomeness

4. Mobile Mapping Options
Browsers
Static Maps API
Native APIs
MapView on Android
Map Kit on iPhone
Javascript API V3

5. Mobile Mapping Options
Google Geo APIs

6. Maps in Browser
1. Open a browser
2. Go to YourSite.com
3. Use Static Maps
API or
Javascript API

7. 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/

8. 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;
}
}

9. 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];
}

10. 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

11. 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

12. Embed Javascript API V3 in Native Apps
Javascript API V3 map
Android
iPhone

13. 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

14. 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);

15. Javascript API V3 Map

16. 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);
}

17. Map in Android App in Eclipse

18. 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];
}

19. Map in iPhone App in XCode

20. iPhone App in XCode (Demo)

21. More Javascript API V3 Awesomeness
HTML5 deck at /Users/shawnshen/Desktop/devfest/

22. Timeline of Maps Javascript API V3

23. Key Take-Aways
Recommended Mobile Mapping
Embed Javascript map in native apps
Maps Javascript API V3 is awesome
เท Lots of features
เจง Innovation

24. ขอบคุณ! 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/