I'll highlight the fusion of three trends: mobile, social, and geolocation that leads to the rise of geo mobile web, and show that Google Maps is powering the geo social networks with examples like Gowalla and FourSquare,

1. Mobile Mapping in Google Maps
and Rise of Geo Mobile Web
March 14, 2010
Shawn Shen, Developer Advocate

2. Overview of Google Geo/Maps APIs Covered
Javascript API v2/v3
Street View API
Static Maps API
Flash API
Google Maps Data API
Services e.g. Geocoding,
Directions, Monetization,
Local Search, etc.

3. Mobile + Social + Geolocation
Rise of Geo Mobile Web
Rise of Geo Social Networks
Google Maps powering Geo Mobile Web

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

5. Google Maps in Browsers as Web App
Advantages Disadvantages
JavaScript Maps API v3 No distribution
in App Store or
Web app in browsers Android Market
MVC design optimized for
mobile
Cannot take
advantage of
Share code base between device sensors
mobile and web
Lack native
No apps to update apps touch and
feel
Use JavaScript to
geolocate current position

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

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

8. Google Maps in Native Apps
Advantages
Better performance
Tight integration with device
sensors
Disadvantages
APIs for native apps evolve
more slowly
Big difference between
MapView and MapKit
Require updates of apps for
any new mapping features

9. Embedded Maps in Native Apps: Best Option

10. Embed Maps in WebView/UIWebView on Native Apps
Loading a Maps API Site in a Native Androd Application
Developing Native iPhone Applications using V3
Layout
res/layout/main.xml
Android manifest file for permissions
AndroidManifest.xml
Main Java class
WebMapActivity
JavaScript v3 map
http://gmaps-samples.googlecode.com/svn/trunk/articles-
android-webmap/simple-android-map.html

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

12. Define Native Permissions for Map in WebView
AndroidManifest.xml
<uses-permission android:name="
{PERMISSION}"/>
android.permission.INTERNET
android.permission.
ACCESS_COARSE_LOCATION
android.permission.ACCESS_FINE_LOCATION

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

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

15. Final WebMapActivity in Eclipse Emulator

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

17. Final UIWebView iPhone App in Xcode Emulator

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

19. Example: Google Maps Navigation for Mobile
Turn by turn directions
Replacing standalone GPS device
Native app on mobile device

20. Example: Google Latitude
Native app on
Android in Google
Maps Mobile
Web app on iPhone
using JavaScript API
Social graph: friends
and discovery

21. Geo Social Network: Gowalla
Profile/Passport
Spots/Places
Trips
Friends
Check in
Build circle of
friends anew or
from existing
friends

22. Geo Social Network: FourSquare
Profile
Places
To Do
Friends
Badges
Check In
Build new circle of
friends or from
existing friends

23. Geo Campus Community: iStanford

24. Geo Mobile Web Spawning New Social Networks
New breed of social networks
emerging from sharing
location-aware activities and
location based info

25. Recap
Mobile + Social + Geolocation trends
Rise of Geo Mobile Web/Geo SNS
Powered by Google Maps
Data source e.g. tiles, places
Tools e.g. rendering/interactivity
Services e.g. geocoding

26. More hands-on coding session with Google
Maps API later at 5pm today
Links:
Android map: http://bit.ly/7w8wQs
Android Missouri map: http://bit.ly/abUD0f
iPhone map: http://bit.ly/bRy6l1
Today's codelabs: http://bit.ly/gcodelas
Thank you!
Q&A