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



Shawn Shen, Developer ...
Overview of Google Geo/Maps APIs Covered
  Javascript API v2/v3
  Street View API
  Static Maps API
  Flash API
  Google M...
Mobile + Social + Geolocation

     Rise of Geo Mobile Web
     Rise of Geo Social Networks
     Google Maps powering Geo ...
Mobile Mapping Options using Google Maps

    Web Apps

       Static Maps API (All)

       JavaScript Maps API
       (i...
Google Maps in Browsers as Web App
Advantages                            Disadvantages
  JavaScript Maps API v3           ...
Google Maps Embedded in Native Apps

Advantages
  Gain distribution in App Store
  or Android Market

  Native app look an...
Google Maps Embedded in Native Apps
Advantages
  Mapping does not require
  client update

  Use JavaScript to geolocate
 ...
Google Maps in Native Apps
Advantages
  Better performance

  Tight integration with device
  sensors

Disadvantages
  API...
Embedded Maps in Native Apps: Best Option
Embed Maps in WebView/UIWebView on Native Apps

    Loading a Maps API Site in a Native Androd Application
    Developing ...
Define Native Layout for Map in WebView

  <LinearLayout xmlns:android="..."
    android:orientation="horizontal"
    andr...
Define Native Permissions for Map in WebView


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

   ...
Define WebMapActivity Java class

public class WebMapActivity extends Activity {
 private static final String JS_MAP_URL =...
Embedded JavaScript Map

var myLatlng = new google.maps.LatLng(lat,long);

var myOptions = {
  zoom: 8,
  center: myLatlng...
Final WebMapActivity in Eclipse Emulator
Embed Maps in UIWebView on iPhone Apps


- (void)viewDidLoad {
   NSString *url = @"{JS_MAP_URL}";
   NSURLRequest *reques...
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 mo...
Example: Google Maps Navigation for Mobile




        Turn by turn directions
        Replacing standalone GPS device
   ...
Example: Google Latitude


                           Native app on
                           Android in Google
         ...
Geo Social Network: Gowalla

                                Profile/Passport
                                Spots/Places...
Geo Social Network: FourSquare

                                   Profile
                                   Places
     ...
Geo Campus Community: iStanford
Geo Mobile Web Spawning New Social Networks




      New breed of social networks
      emerging from sharing
      locat...
Recap


 Mobile + Social + Geolocation trends
 Rise of Geo Mobile Web/Geo SNS
 Powered by Google Maps
   Data source e.g. ...
More hands-on coding session with Google
Maps API later at 5pm today

Links:
   Android map: http://bit.ly/7w8wQs
   Andro...
Upcoming SlideShare
Loading in...5
×

Mobile Mapping In Google Maps and Rise of Geo Mobile Web

5,588

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,588
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
144
Comments
0
Likes
3
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 http://gmaps-samples.googlecode.com/svn/trunk/articles- 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(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. 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. 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: http://code.google.com/apis/maps/articles/tutorial-iphone.html
  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: 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×