Mobile Mapping in Google Maps and Rise of Geo Mobile WebMarch 14, 2010

Shawn Shen, Developer Advocate

Overview of Google Geo/Maps APIs CoveredJavascript API v2/v3

Street View API

Static Maps API

Flash API

Google Maps Data API

Services e.g. Geocoding, Directions, Monetization, Local Search, etc.

Mobile + Social + Geolocation

Rise of Geo Mobile WebRise of Geo Social NetworksGoogle Maps powering Geo Mobile Web

Mobile Mapping Options using Google Maps

Web Apps

Static Maps API (All)

JavaScript Maps API (iPhone & Android)

Native/WebView Hybrid

WebView/UIWebView

JavaScript Maps API V3

Native Apps

MapView for Android

MapKit for Apple

Google Maps in Browsers as Web App

Advantages

JavaScript Maps API v3

Web app in browsers

MVC design optimized for mobile

Share code base between mobile and web

No apps to update

Use JavaScript to geolocate current position

Disadvantages

No distribution in App Store or Android Market

Cannot take advantage of device sensors

Lack native apps touch and feel

Google Maps Embedded in Native Apps

Advantages

Gain distribution in App Store or Android Market

Native app look and feel

Can bridge to use sensors

JavaScript Maps API v3

Cross browsers

Share map code between mobile and web

Google Maps Embedded in Native Apps

Advantages

Mapping does not require client update

Use JavaScript to geolocate current position

Disadvantages

Native apps permissions Code base for native apps per device

Google Maps in Native Apps

Advantages

Better performance

Tight integration with device sensors

Disadvantages

APIs for native apps evolve more slowlyBig difference between MapView and MapKitRequire updates of apps for any new mapping features

Embedded Maps in Native Apps: Best Option

Embed Maps in WebView/UIWebView on Native Apps

Loading a Maps API Site in a Native Androd ApplicationDeveloping Native iPhone Applications using V3

Layoutres/layout/main.xml

Android manifest file for permissionsAndroidManifest.xml

Main Java classWebMapActivity

JavaScript v3 map http://gmaps-samples.googlecode.com/svn/trunk/articles-android-webmap/simple-android-map.html

Define Native Layout for Map in WebView

<LinearLayout xmlns:android="..." android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/></LinearLayout>

Define Native Permissions for Map in WebView

AndroidManifest.xml <uses-permission android:name="{PERMISSION}"/>

android.permission.INTERNETandroid.permission.ACCESS_COARSE_LOCATION android.permission.ACCESS_FINE_LOCATION

Define WebMapActivity Java class

public class WebMapActivity extends Activity { private static final String JS_MAP_URL = "..."; private WebView webView;

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); webView = (WebView) findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl(JS_MAP_URL); }}JS_MAP_URL: http://code.google.com/apis/maps/articles/android_v3.html

Embedded JavaScript Map

var myLatlng = new google.maps.LatLng(lat,long); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP}var map_div = document.getElementById("map"); map = new google.maps.Map(map_div, myOptions); http://code.google.com/apis/maps/articles/android_v3.html

Final WebMapActivity in Eclipse Emulator

Embed Maps in UIWebView on iPhone Apps

- (void)viewDidLoad { NSString *url = @"{JS_MAP_URL}"; NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:url]]; [webView loadRequest:request]; [super viewDidLoad]; }

Developing Native iPhone Applications using V3 JS_MAP_URL: http://code.google.com/apis/maps/articles/tutorial-iphone.html

Final UIWebView iPhone App in Xcode Emulator

Apps of the Geo Mobile Web

Let's look at a few real world apps that take advantage of the fusion mobile, social and geolocation trends

Example: Google Maps Navigation for Mobile

Turn by turn directionsReplacing standalone GPS device Native app on mobile device

Example: Google Latitude

Native app on Android in Google Maps MobileWeb app on iPhone using JavaScript APISocial graph: friends and discovery

Geo Social Network: Gowalla

Profile/PassportSpots/PlacesTripsFriends

Check in Build circle of friends anew or from existing friends

Geo Social Network: FourSquare

ProfilePlacesTo DoFriendsBadges

Check In Build new circle of friends or from existing friends

Geo Campus Community: iStanford

Geo Mobile Web Spawning New Social Networks

New breed of social networks emerging from sharing location-aware activities and location based info

Recap

Mobile + Social + Geolocation trendsRise of Geo Mobile Web/Geo SNS Powered by Google Maps

Data source e.g. tiles, placesTools e.g. rendering/interactivityServices e.g. geocoding

More hands-on coding session with Google Maps API later at 5pm today Links:

Android map: http://bit.ly/7w8wQsAndroid Missouri map: http://bit.ly/abUD0fiPhone map: http://bit.ly/bRy6l1 Today's codelabs: http://bit.ly/gcodelas

Thank you!

Q&A