Mobile Mapping In Google Maps and Rise of Geo Mobile Web

  • 5,381 views
Uploaded 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 …

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,

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,381
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
135
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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