![Page 1: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/1.jpg)
Mapping on Your Phone
Mano Marks Senior Developer Advocate
![Page 2: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/2.jpg)
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
![Page 3: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/3.jpg)
Mobile and Geo, a Natural Fit • GPS • Compass • Wireless • Accelerometer
![Page 4: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/4.jpg)
Overview of Google Geo APIs
![Page 5: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/5.jpg)
Google Maps on Mobile Options • Maps API V3 in Browser • iPhone Native MapKit • Android Native MapView • Hybrid Native with Browser • Static Maps API
![Page 6: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/6.jpg)
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
![Page 7: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/7.jpg)
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
![Page 8: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/8.jpg)
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>
![Page 9: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/9.jpg)
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
![Page 10: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/10.jpg)
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
![Page 11: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/11.jpg)
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); }
![Page 12: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/12.jpg)
![Page 13: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/13.jpg)
Optimizations • KML Layers • Fusion Table Layers • Street View • HTML 5 GeoLocation • Styled Maps
![Page 14: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/14.jpg)
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);
![Page 15: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/15.jpg)
Fusion Table Layers layer=newgoogle.maps.FusionTablesLayer(someid,
{query:"SELECTaddressFROMsomeidWHEREridership>5000"});layer.setMap(map);
![Page 16: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/16.jpg)
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
![Page 17: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/17.jpg)
HTML 5 GeoLocation • Device provides location • Mobile often gives GPS location • Desktop browser gives ip or wifi
![Page 18: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/18.jpg)
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})
![Page 19: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/19.jpg)
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
![Page 20: Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)](https://reader033.vdocuments.pub/reader033/viewer/2022042714/54b6e8414a7959b35f8b46c1/html5/thumbnails/20.jpg)
Demos