0
Mobile Mapping Mano Marks Geo Developer Advocate Startpad September 1 st , 2009
What are (were) the API options? Lowest common denominator: Static Maps Android, iPhone: Native APIs iPhone, Android, Noki...
<ul><ul><li>Browser Win: </li></ul></ul><ul><ul><li>Many different platforms </li></ul></ul><ul><ul><li>Let us solve the c...
<ul><ul><li>Returns a static image </li></ul></ul><ul><ul><li>Just upgraded to v2 with lots of new features </li></ul></ul...
<ul><ul><li>iPhone 3.0 SDK </li></ul></ul><ul><ul><li>Apple API (not Google, exactly) </li></ul></ul><ul><ul><li>Objective...
<ul><ul><li>OK, MapView is just one class in  com.google.android.maps </li></ul></ul><ul><ul><li>Java Development </li></u...
What makes mobile browsers tricky? <ul><ul><li>Screen size </li></ul></ul><ul><ul><li>User interface and interaction </li>...
Causes of Latency <ul><ul><li>Serving data </li></ul></ul><ul><ul><li>Download time </li></ul></ul><ul><ul><ul><li>Bandwid...
What is latency? <ul><ul><li>Page load: the time until all components of the page are loaded, visible, and usable </li></u...
Attempts to reduce JS page load latency <ul><ul><li>Reduce size of JavaScript </li></ul></ul><ul><ul><ul><li>Compile/obfus...
Attempts to reduce JS perceived latency <ul><ul><li>Load Static map first, and then JS </li></ul></ul>JS -> Static
So, how well does Google Maps API v2  work on mobile browsers? <ul><ul><li>Not very </li></ul></ul><ul><ul><li>Initial dow...
Maps API Version 3
 
Speed Comparison v3 v2 35KB 190KB
How does v3 accomplish this improvement? <ul><ul><li>Start with static map </li></ul></ul><ul><ul><li>MVC Architecture </l...
What does v3 look like? var map = new google.maps.Map(    document.getElementById(&quot;map_canvas&quot;),    { center: ne...
What can you do with v3? Markers, Controls, InfoWindows Geocoding  (Forward/Reverse) Custom Overlays
Screen-Size Dependent Default UI
No Keys Required! http://maps.google.com/maps/api/js?sensor=false
Learn more at  http://code.google.com/apis/maps/
Upcoming SlideShare
Loading in...5
×

StartPad Countdown 5 - Google Geo: Mobile Mapping

1,934

Published on

Mapping technologies and mobile technologies have often been at odds with each other. Mobile technologies require compact, high performance applications, and maps require massive amounts of data and special interfaces. Recently, mapping technologies have been optimized for the increased power of modern mobile devices. This talk will give an overview of what Google offers to mobile developers, including Android MapView and iPhone MapKit, and will demonstrate how to get started with the new Google Maps API version 3, which has been optimized for mobile devices.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,934
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • We&apos;re going to talk about the options for various devices.  Though we&apos;re all excited about the iPhone and Android and the other devices coming to the market with fully-featured browsers, I&apos;ll mention solutions for non-JS enabled devices. The static maps API, which I&apos;ll go into greater detail about, provides a solution for the lowest common denominator: it requires no JS and so can render in any phone browser.  Users cannot interact with it, but it at least gives the ability to show locations on a map. Native APIs provide for a slick user interface and take full advantage of the phone&apos;s hardware. And then there&apos;s the JavaScript API that is officially supported on iPhone, works pretty well on Android, and has the potential to work on other high-end browsers.
  • Since the browser has so many issues with both startup and interaction  performance, why not just create an application using client APIs?  The  experience of using the native API on the iPhone is bound to be smoother.  At Google, we&apos;ve found the web browser to be incredibly powerful.  Downloads introduce a steep barrier to entry.  And how many times have Mac users asked when their favorite Windows application will be available for them?
  • Since the browser has so many issues with both startup and interaction  performance, why not just create an application using client APIs?  The  experience of using the native API on the iPhone is bound to be smoother.  At Google, we&apos;ve found the web browser to be incredibly powerful.  Downloads introduce a steep barrier to entry.  And how many times have Mac users asked when their favorite Windows application will be available for them?
  • Has streetview, polylines, and much more
  • There are a number of issues that make developing in a mobile browser tricky. User interface: The iPhone and Android-based devices have changed the way we are able to interact with maps.  We are working to make the browser based maps experience as smooth as a native application.  We introduced touch and multi-touch functionality in v2.  Mention touch events, desktop components, clickability, webkit
  •    A. server side      1. our servers are fast - serving the files takes negligible time compared to other causes of latency.      2. Distance is a factor. Consider finding local caches for your data if you have users in distant lands (like Australia).    B. download time is limited by bandwidth. Detecting low bandwidth users and serving them appropriately downgraded data (particularly images) can have profound impact. Bandwidth on high speed mobile devices (3g) is good - download time is a fairly constant but small factor in latency (numbers for 10kB, 50kB, 200kB file)    C. parsing/execution time. On both iphone and android devices, parsing time is severely slower than on desktop machines. This is cpu bound. As devices have more processing power, this may improve, but we&apos;re designing for today&apos;s devices. (Numbers for 10kB, 50kB, 200kB file)
  • A. Compiling/obfuscating: Because parsing time on the iphone and android are so slow, obfuscate/compile your code to significantly reduce code size.   (Mention publicly available js compilers?)    B. Download as few scripts/images as you need.  Keep in mind that there is overhead in each download, so the balance between breaking the JS apart and making fewer requests is important.
  • A. Compiling/obfuscating: Because parsing time on the iphone and android are so slow, obfuscate/compile your code to significantly reduce code size.   (Mention publicly available js compilers?)    B. Download as few scripts/images as you need.  Keep in mind that there is overhead in each download, so the balance between breaking the JS apart and making fewer requests is important.
  •   
  •    A. takes Xs to load on the iphone over wireless, Ys over 3G    B. design: uses an MVC (model-view-controller) design to download only the state storing models initially. When objects like Map or Marker are instantiated, the modules required to render their views are downloaded asynchronously    C. first requests a static map to reduce user perceived latency. Then makes that map draggable even before tiles have necessarily loaded    D. expected increase to initial download per feature (how much did marker and infowindow add?)      1. untangling of modules: map knows nothing about marker or infowindow or marker about infowindow. You can have as many infowindows as you want and they can be associated with any object that inherits from our generic MVC object known as MVCObject.    E. basic development should be as simple as v2 (although interface has changed so it may seem awkward at first!). We&apos;ve exposed the basic object that all of our models and views inherit from. This allows you to create rich applications fairly simply. We&apos;ve become big fans of MVC while developing the new API. See how simple it is to create the OverlayMapControl. In v2 that took X lines of complicated state tracking.
  • One of the most obvious differences between desktops and mobile devices that has not changed even with the introduction of full-featured browsers is the size.  Designing a mobile applications remains a different and challenging task.  Whereas on a desktop, you may be able to expose a map and content on one page, you may prefer for your map to fill the page and expose extended content on user action.  We have worked to enhance the mobile maps experience in the v3 API by detecting the map size and ensuring appropriately sized controls are used by default and that info windows are bound by the map size.
  •    A. takes Xs to load on the iphone over wireless, Ys over 3G    B. design: uses an MVC (model-view-controller) design to download only the state storing models initially. When objects like Map or Marker are instantiated, the modules required to render their views are downloaded asynchronously    C. first requests a static map to reduce user perceived latency. Then makes that map draggable even before tiles have necessarily loaded    D. expected increase to initial download per feature (how much did marker and infowindow add?)      1. untangling of modules: map knows nothing about marker or infowindow or marker about infowindow. You can have as many infowindows as you want and they can be associated with any object that inherits from our generic MVC object known as MVCObject.    E. basic development should be as simple as v2 (although interface has changed so it may seem awkward at first!). We&apos;ve exposed the basic object that all of our models and views inherit from. This allows you to create rich applications fairly simply. We&apos;ve become big fans of MVC while developing the new API. See how simple it is to create the OverlayMapControl. In v2 that took X lines of complicated state tracking.
  • One of the most obvious differences between desktops and mobile devices that has not changed even with the introduction of full-featured browsers is the size.  Designing a mobile applications remains a different and challenging task.  Whereas on a desktop, you may be able to expose a map and content on one page, you may prefer for your map to fill the page and expose extended content on user action.  We have worked to enhance the mobile maps experience in the v3 API by detecting the map size and ensuring appropriately sized controls are used by default and that info windows are bound by the map size.
  • One of the most obvious differences between desktops and mobile devices that has not changed even with the introduction of full-featured browsers is the size.  Designing a mobile applications remains a different and challenging task.  Whereas on a desktop, you may be able to expose a map and content on one page, you may prefer for your map to fill the page and expose extended content on user action.  We have worked to enhance the mobile maps experience in the v3 API by detecting the map size and ensuring appropriately sized controls are used by default and that info windows are bound by the map size.
  • Transcript of "StartPad Countdown 5 - Google Geo: Mobile Mapping"

    1. 1. Mobile Mapping Mano Marks Geo Developer Advocate Startpad September 1 st , 2009
    2. 2. What are (were) the API options? Lowest common denominator: Static Maps Android, iPhone: Native APIs iPhone, Android, Nokia, Palm, etc: JavaScript API
    3. 3. <ul><ul><li>Browser Win: </li></ul></ul><ul><ul><li>Many different platforms </li></ul></ul><ul><ul><li>Let us solve the cross-device issues </li></ul></ul><ul><ul><li>Mashups available on desktop as well as mobile </li></ul></ul><ul><ul><li>No download </li></ul></ul><ul><ul><li>We can release features (and bug fixes) faster </li></ul></ul><ul><ul><li>AppStore approvale </li></ul></ul><ul><ul><li>Native API win: </li></ul></ul><ul><ul><li>Native UI </li></ul></ul><ul><ul><li>One language to learn </li></ul></ul><ul><ul><li>Easier integration with your app </li></ul></ul><ul><ul><ul><li>No loading browser into app </li></ul></ul></ul>Browser vs Native APIs
    4. 4. <ul><ul><li>Returns a static image </li></ul></ul><ul><ul><li>Just upgraded to v2 with lots of new features </li></ul></ul><ul><ul><li>Doesn’t use JS </li></ul></ul><ul><ul><li>No slippy-ness </li></ul></ul><ul><ul><li>Wide compatibility </li></ul></ul>Static Maps API
    5. 5. <ul><ul><li>iPhone 3.0 SDK </li></ul></ul><ul><ul><li>Apple API (not Google, exactly) </li></ul></ul><ul><ul><li>Objective C </li></ul></ul><ul><ul><li>Less Powerful than JS API </li></ul></ul>iPhone Development with MapKit
    6. 6. <ul><ul><li>OK, MapView is just one class in com.google.android.maps </li></ul></ul><ul><ul><li>Java Development </li></ul></ul><ul><ul><li>More powerful than iPhone </li></ul></ul><ul><ul><li>Iteration still requires new Android release </li></ul></ul>Android Development with MapView
    7. 7. What makes mobile browsers tricky? <ul><ul><li>Screen size </li></ul></ul><ul><ul><li>User interface and interaction </li></ul></ul><ul><ul><li>Speed </li></ul></ul><ul><ul><li>Use cases </li></ul></ul>
    8. 8. Causes of Latency <ul><ul><li>Serving data </li></ul></ul><ul><ul><li>Download time </li></ul></ul><ul><ul><ul><li>Bandwidth vs latency </li></ul></ul></ul><ul><ul><ul><ul><li>3G networks have reasonably high bandwidth but low latency </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Loading small and big files take a surprisingly similar amount of time </li></ul></ul></ul></ul><ul><ul><li>JavaScript parsing time (iPhone Safari) </li></ul></ul>
    9. 9. What is latency? <ul><ul><li>Page load: the time until all components of the page are loaded, visible, and usable </li></ul></ul><ul><ul><li>User perceived: the time until the page appears to have loaded </li></ul></ul>
    10. 10. Attempts to reduce JS page load latency <ul><ul><li>Reduce size of JavaScript </li></ul></ul><ul><ul><ul><li>Compile/obfuscate code </li></ul></ul></ul><ul><ul><ul><li>Delay load code until required </li></ul></ul></ul><ul><ul><li>Combine image fetches using sprites </li></ul></ul>
    11. 11. Attempts to reduce JS perceived latency <ul><ul><li>Load Static map first, and then JS </li></ul></ul>JS -> Static
    12. 12. So, how well does Google Maps API v2 work on mobile browsers? <ul><ul><li>Not very </li></ul></ul><ul><ul><li>Initial download: 60kB in 2006; 190kB now </li></ul></ul><ul><ul><li>Time to load tiles </li></ul></ul><ul><ul><li>Synchronous access to state limits ability to delay-load code </li></ul></ul><ul><ul><li>Code base not designed with mobile in mind </li></ul></ul>
    13. 13. Maps API Version 3
    14. 15. Speed Comparison v3 v2 35KB 190KB
    15. 16. How does v3 accomplish this improvement? <ul><ul><li>Start with static map </li></ul></ul><ul><ul><li>MVC Architecture </li></ul></ul><ul><ul><li>Remove unneeded code, Untangle code </li></ul></ul>
    16. 17. What does v3 look like? var map = new google.maps.Map(    document.getElementById(&quot;map_canvas&quot;),    { center: new google.maps.LatLng(37.442, -122.142),      zoom: 13,      mapTypeId: google.maps.MapTypeId.ROADMAP    }); var marker = new google.maps.Marker(    {      position: map.get_center(),      map: map    }); Simple Map
    17. 18. What can you do with v3? Markers, Controls, InfoWindows Geocoding  (Forward/Reverse) Custom Overlays
    18. 19. Screen-Size Dependent Default UI
    19. 20. No Keys Required! http://maps.google.com/maps/api/js?sensor=false
    20. 21. Learn more at http://code.google.com/apis/maps/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×