google developer day 2010 japan: android や iphone で活用する maps api...

Post on 15-Jan-2015

2.724 Views

Category:

Technology

1 Downloads

Preview:

Click to see full reader

DESCRIPTION

これまで、Android, iPhone, iPad などのモバイル端末上で Google Maps をカスタマイズすることは簡単ではありませんでした。このたびリリースされた新しい Maps API はパフォーマンス向上や活用の幅を広げるために役立つ各種新機能をそろえています。MVC オブジェクト, KML レイヤー、Fusion Table レイヤー などはパフォーマンス向上に役立ち、モバイル環境には欠かせないものです。マップスタイリング機能はマップの色の変更を可能にし、 カスタムストリートビューパノラマは自分で用意したイメージをストリートビューに配置して屋内パノラマを作るなど、カスタマイズによって ストリートビューに新しい可能性をもたらします。パワフルでユニークなモバイルマップをつくりたい方は是非おこし下さい。

TRANSCRIPT

Mapping on Your Phone

Mano Marks Senior Developer Advocate

Google

Agenda •  Mobile Mapping Options

–  Browser based –  Native APIs –  Hybrid –  Static Maps API

•  Optimizations –  KML Layers –  Fusion Table Layers –  Street View –  HTML 5 GeoLocation –  Styled Maps

Mobile and Geo, a Natural Fit •  GPS •  Compass •  Wireless •  Accelerometer

Overview of Google Geo APIs

Google Maps on Mobile Options •  Maps API V3 in Browser •  iPhone Native MapKit •  Android Native MapView •  Hybrid Native with Browser •  Static Maps API

Google Maps on Mobile Options Features GoogleMaps

APIV3GoogleMapsoniPhone

GoogleMapsonAndroid

GoogleSta9cMapsAPI

AddaMap X X X X

Markers X X X X

Geocoding X X X

Polygons/Polylines

X X(4.0SDKandLater)

X X

CustomMapTiles

X

StyledMaps X

KML/GeoRSSLayers

X

DirecEons X

StreetView X X X

Mobile Browser Only •  Full JavaScript browsers •  Access to some

phone features •  HTML 5 •  Write once •  Rapid development and

deployment •  No App Store/Marketplace process •  No App Store/Marketplace discoverability

Sample Code <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

</script><script type="text/javascript">function initialize() { var myLatlng = new google.maps.LatLng(37.422032,-122.084511); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }</script>

Native APIs Only •  MapKit on iPhone •  MapView on Android •  App Store/Marketplace

discoverability •  App Store/Marketplace

launch process •  Harder development •  No support outside of platform

Hybrid Browser/Native •  WebView on Android •  uiWebView in iPhone •  Access to additional features

of phone •  Rapid development of map •  Map is write once, but app is

write per platform •  App Store/Marketplace

discoverability/launch process

Hybrid Browser/Native public class WebMapActivity extends Activity { private static final String MAP_URL = some_url; private WebView webView; @Override /** Called when the activity is first created. */ public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); getLocation(); setupWebView(); } private void setupWebView(){ final String centerURL = "javascript:centerAt(" + mostRecentLocation.getLatitude() + "," + mostRecentLocation.getLongitude()+ ")"; webView = (WebView) findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); //Wait for the page to load then send the location information webView.setWebViewClient(new WebViewClient()); webView.loadUrl(MAP_URL); }

Optimizations •  KML Layers •  Fusion Table Layers •  Street View •  HTML 5 GeoLocation •  Styled Maps

KML Layers varkmlLayer=newgoogle.maps.KmlLayer(’hLp://

example.com/kmllayer.kml');kmlLayer.setMap(map);//couldalsobeaGeoRSSfile

google.maps.event.addListener(kmlLayer,'click',funcEon(kmlEvent){vartext=kmlEvent.featureData.descripEon;doSomething(text);

Fusion Table Layers layer=newgoogle.maps.FusionTablesLayer(someid,

{query:"SELECTaddressFROMsomeidWHEREridership>5000"});layer.setMap(map);

Street View in V3 API •  Gracefully degrades from:

–  WebGL –  HTML 5 Canvas –  HTML 4

•  No Flash, so works in browser •  Custom Street View panoramas now allowed

HTML 5 GeoLocation •  Device provides location •  Mobile often gives GPS location •  Desktop browser gives ip or wifi

GeoLocation Sample Code function showMap(position) { // Show a map

centered at position } // One-shot position request

navigator.geolocation.getCurrentPosition(showMap);

navigator.geolocation.getCurrentPosition (successCallback, errorCallback, {maximumAge:3600})

Styled Maps •  Control Color of

–  Administrative Units –  Landscape Types –  Points of Interest –  Roads –  Transit –  Water

•  Change width of borders •  Change size and color of labels

Demos

top related