Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

StartPad Countdown 5 - Google Geo: Mobile Mapping


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
  • Be the first to comment

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 </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!
  20. 21. Learn more at