• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

  • 2,707 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,707
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
16
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
 Google
Maps
 Google
Maps
 Google
Sta9c
 API
V3
 on
iPhone
 on
Android
 Maps
API
 Add
a
Map
 X
 X
 X
 X
 Markers
 X
 X
 X
 X
 Geocoding
 X
 X
 X
 Polygons/ X
 X
(4.0
SDK
 X
 X
 Polylines
 and
Later)
 Custom
Map
 X
 Tiles
 Styled
Maps
 X
 KML/GeoRSS
 X
 Layers
 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