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,
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Mobile Mapping In Google Maps and Rise of Geo Mobile Web
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
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
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