Mobile Mapping In Google Maps and Rise of Geo Mobile Web


Published on

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,

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile Mapping In Google Maps and Rise of Geo Mobile Web

  1. 1. Mobile Mapping in Google Maps and Rise of Geo Mobile Web March 14, 2010 Shawn Shen, Developer Advocate
  2. 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. 3. Mobile + Social + Geolocation Rise of Geo Mobile Web Rise of Geo Social Networks Google Maps powering Geo Mobile Web
  4. 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. 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. 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. 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. 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. 9. Embedded Maps in Native Apps: Best Option
  10. 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 android-webmap/simple-android-map.html
  11. 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. 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. 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(; webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl(JS_MAP_URL); } } JS_MAP_URL:
  14. 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);
  15. 15. Final WebMapActivity in Eclipse Emulator
  16. 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:
  17. 17. Final UIWebView iPhone App in Xcode Emulator
  18. 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. 19. Example: Google Maps Navigation for Mobile Turn by turn directions Replacing standalone GPS device Native app on mobile device
  20. 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. 21. Geo Social Network: Gowalla Profile/Passport Spots/Places Trips Friends Check in Build circle of friends anew or from existing friends
  22. 22. Geo Social Network: FourSquare Profile Places To Do Friends Badges Check In Build new circle of friends or from existing friends
  23. 23. Geo Campus Community: iStanford
  24. 24. Geo Mobile Web Spawning New Social Networks New breed of social networks emerging from sharing location-aware activities and location based info
  25. 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. 26. More hands-on coding session with Google Maps API later at 5pm today Links: Android map: Android Missouri map: iPhone map: Today's codelabs: Thank you! Q&A