Mobile Mapping In Google Maps and Rise of Geo Mobile Web
-
Upload
ss318 -
Category
Technology
-
view
5.530 -
download
0
description
Transcript of Mobile Mapping In Google Maps and Rise of Geo Mobile Web
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