Your SlideShare is downloading. ×
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能 (マノ マークス)

2,763
views

Published on

これまで、Android, iPhone, iPad などのモバイル端末上で Google Maps をカスタマイズすることは簡単ではありませんでした。このたびリリースされた新しい Maps API はパフォーマンス向上や活用の幅を広げるために役立つ各種新機能をそろえています。MVC オブジェクト, KML レイヤー、Fusion Table レイヤー …

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

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,763
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
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. Mapping on Your Phone Mano Marks Senior Developer Advocate Google
  • 2. 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
  • 3. Mobile and Geo, a Natural Fit •  GPS •  Compass •  Wireless •  Accelerometer
  • 4. Overview of Google Geo APIs
  • 5. Google Maps on Mobile Options •  Maps API V3 in Browser •  iPhone Native MapKit •  Android Native MapView •  Hybrid Native with Browser •  Static Maps API
  • 6. Google Maps on Mobile Options Features
 Google
Maps
 API
V3
 Google
Maps
 on
iPhone
 Google
Maps
 on
Android
 Google
Sta9c
 Maps
API
 Add
a
Map
 X
 X
 X
 X
 Markers
 X
 X
 X
 X
 Geocoding
 X
 X
 X
 Polygons/ Polylines
 X
 X
(4.0
SDK
 and
Later)
 X
 X
 Custom
Map
 Tiles
 X
 Styled
Maps
 X
 KML/GeoRSS
 Layers
 X
 DirecEons
 X
 Street
View
 X
 X
 X

  • 7. 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
  • 8. 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>
  • 9. 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
  • 10. 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
  • 11. 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); }
  • 12. Optimizations •  KML Layers •  Fusion Table Layers •  Street View •  HTML 5 GeoLocation •  Styled Maps
  • 13. KML Layers var
kmlLayer=
new
google.maps.KmlLayer(’hLp:// example.com/kmllayer.kml');
 kmlLayer.setMap(map);

 //could
also
be
a
GeoRSS
file
 google.maps.event.addListener(kmlLayer,
'click',
 funcEon(kmlEvent)
{
 

var
text
=
kmlEvent.featureData.descripEon;
 

doSomething(text);

  • 14. Fusion Table Layers layer
=
new
google.maps.FusionTablesLayer(someid,
 {
 

query:
"SELECT
address
FROM
someid
WHERE
 ridership
>
5000"}
 );
 layer.setMap(map);

  • 15. 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
  • 16. HTML 5 GeoLocation •  Device provides location •  Mobile often gives GPS location •  Desktop browser gives ip or wifi
  • 17. GeoLocation Sample Code function showMap(position) { // Show a map centered at position } // One-shot position request navigator.geolocation.getCurrentPosition(show Map); navigator.geolocation.getCurrentPosition (successCallback, errorCallback, {maximumAge:3600})
  • 18. 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
  • 19. Demos