SlideShare a Scribd company logo
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, Nokia, Palm, etc: JavaScript API
Browser Win: Many different platforms Let us solve the cross-device issues Mashups available on desktop as well as mobile No download We can release features (and bug fixes) faster AppStore approvale Native API win: Native UI One language to learn Easier integration with your app No loading browser into app Browser vs Native APIs
Returns a static image Just upgraded to v2 with lots of new features Doesn’t use JS No slippy-ness Wide compatibility Static Maps API
iPhone 3.0 SDK Apple API (not Google, exactly) Objective C Less Powerful than JS API iPhone Development with  MapKit
OK, MapView is just one class in  com.google.android.maps Java Development More powerful than iPhone Iteration still requires new Android release Android Development with  MapView
What makes mobile browsers tricky? Screen size User interface and interaction Speed Use cases
Causes of Latency Serving data Download time Bandwidth vs latency 3G networks have reasonably high bandwidth but low latency Loading small and big files take a surprisingly similar amount of time JavaScript parsing time (iPhone Safari)
What is latency? Page load: the time until all components of the page are loaded, visible, and usable User perceived: the time until the page appears to have loaded
Attempts to reduce JS page load latency Reduce size of JavaScript Compile/obfuscate code Delay load code until required Combine image fetches using sprites
Attempts to reduce JS perceived latency Load Static map first, and then JS JS -> Static
So, how well does Google Maps API v2  work on mobile browsers? Not very Initial download: 60kB in 2006; 190kB now Time to load tiles Synchronous access to state limits ability to delay-load code Code base not designed with mobile in mind
Maps API Version 3
 
Speed Comparison v3 v2 35KB 190KB
How does v3 accomplish this improvement? Start with static map MVC Architecture Remove unneeded code, Untangle code
What does v3 look like? var map = new google.maps.Map(    document.getElementById("map_canvas"),    { 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
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/

More Related Content

PDF
Xamarin y MS Azure | Cognitive Services
PPT
Rhodes E Ruby Con
PPT
Rhomobile.dist
PDF
App engine cloud_comp_expo_nyc
PPTX
Windows phone 8 - Från lapp till app
PPTX
Meteor js
PDF
Google App Engine's Latest Features
PDF
What is Google App Engine
Xamarin y MS Azure | Cognitive Services
Rhodes E Ruby Con
Rhomobile.dist
App engine cloud_comp_expo_nyc
Windows phone 8 - Från lapp till app
Meteor js
Google App Engine's Latest Features
What is Google App Engine

What's hot (20)

ZIP
Google App Engine
PPTX
Porting Hybrid Apps to Native Apps
DOC
Mobile Application Developer
PDF
Resume_MENG-YI_HSU
PDF
App Engine Overview @ Google Hackathon SXSW 2010
PDF
Why Use Server Side Rendering To Boost Performance and User Experience?
PPTX
.NET Today & Tomorrow @ Beer City Code
PPT
Google App Engine
PPTX
Android L and So Much More Webinar Slides
ODP
Application Craft Tutorial for Google Map
PPTX
Google App Engine
PDF
Google App Engine (Introduction)
PPTX
Introduction to Angular 2.0
PDF
Infinum android talks #12 - Google IO report: Milkshakes, Marshmallows and Ma...
PDF
AEM responsive
PDF
Power of Google Cloud Platform with Spring Cloud GCP
PPT
Drasil Mapper Plugin
PDF
SWIFTly, Go Cloud!! - Swift@IBM
PDF
I've (probably) been using Google App Engine for a week longer than you have
PPTX
Benefits of developing a Single Page Web Applications using AngularJS
Google App Engine
Porting Hybrid Apps to Native Apps
Mobile Application Developer
Resume_MENG-YI_HSU
App Engine Overview @ Google Hackathon SXSW 2010
Why Use Server Side Rendering To Boost Performance and User Experience?
.NET Today & Tomorrow @ Beer City Code
Google App Engine
Android L and So Much More Webinar Slides
Application Craft Tutorial for Google Map
Google App Engine
Google App Engine (Introduction)
Introduction to Angular 2.0
Infinum android talks #12 - Google IO report: Milkshakes, Marshmallows and Ma...
AEM responsive
Power of Google Cloud Platform with Spring Cloud GCP
Drasil Mapper Plugin
SWIFTly, Go Cloud!! - Swift@IBM
I've (probably) been using Google App Engine for a week longer than you have
Benefits of developing a Single Page Web Applications using AngularJS
Ad

Viewers also liked (20)

PPTX
Asset mapping nov_2013
PDF
2013 Mission First Track, How GIS Supports USAFA's Civil Engineer Squadron by...
PPTX
Lec 1&2
PPTX
The systematic design of instruction dick and carey
PPT
Thinking about Asset-mapping
PPT
Asset-Mapping and more - an outline proposal for a pan-Scotland Learning Set
PDF
Building responsive web mobile mapping applications
PPTX
GIS and Asset Management Moving to the Future :
PPTX
Gis applications in civil engineering
PPTX
2016 gisco track: gis and asset management by charles osterman
PDF
An Introduction to Mapping, GIS and Spatial Modelling in R (presentation)
PPT
civil engineer
PPTX
The future of GIS as we know it
PDF
QGIS Open Source Desktop GIS
PPTX
Future of GIS, Moving to the Enterprise Platform
PPTX
GIS, Data Access, and the Wisconsin Register of Deeds Offices
PPT
Introduction to Community Asset Mapping
PPTX
GIS and Civil Engineering: Esri UC
PDF
How to Create GIS and BIM Interoperability
Asset mapping nov_2013
2013 Mission First Track, How GIS Supports USAFA's Civil Engineer Squadron by...
Lec 1&2
The systematic design of instruction dick and carey
Thinking about Asset-mapping
Asset-Mapping and more - an outline proposal for a pan-Scotland Learning Set
Building responsive web mobile mapping applications
GIS and Asset Management Moving to the Future :
Gis applications in civil engineering
2016 gisco track: gis and asset management by charles osterman
An Introduction to Mapping, GIS and Spatial Modelling in R (presentation)
civil engineer
The future of GIS as we know it
QGIS Open Source Desktop GIS
Future of GIS, Moving to the Enterprise Platform
GIS, Data Access, and the Wisconsin Register of Deeds Offices
Introduction to Community Asset Mapping
GIS and Civil Engineering: Esri UC
How to Create GIS and BIM Interoperability
Ad

Similar to StartPad Countdown 5 - Google Geo: Mobile Mapping (20)

PPTX
Offline maps for mobile developers (Android/iOS)
PPT
Location Based Services Without the Cocoa
DOCX
INTRODUCTION.docx
PDF
Angular JS 2_0 BCS CTO_in_Res V3
PDF
portfolio
PPTX
GDG Devfest 2016 session on Android N
PDF
Why Consider React Native for the Travel Industry.pdf
ODP
DevChatt 2011 - PhoneGap: For Fun and Science
PDF
Developing for the GeoWeb: Notes From The Field Dev Summit 2009
DOCX
COMP6210 Web Services And Design Methodologies.docx
PDF
mobicon_paper
PPTX
Cross platform Web apps
PPTX
Migrating from Desktop to Mobile
PDF
Online mapping with_the_google_maps_api
KEY
Intro to PhoneGap
PPTX
Trip advsiorhybridpresentation
PPT
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
PDF
[English] Create Mobile LBS Application Using Maps API
PPTX
3 Approaches to Mobile - An A to Z Primer.
PPTX
Reactive web applications using MeteorJS
Offline maps for mobile developers (Android/iOS)
Location Based Services Without the Cocoa
INTRODUCTION.docx
Angular JS 2_0 BCS CTO_in_Res V3
portfolio
GDG Devfest 2016 session on Android N
Why Consider React Native for the Travel Industry.pdf
DevChatt 2011 - PhoneGap: For Fun and Science
Developing for the GeoWeb: Notes From The Field Dev Summit 2009
COMP6210 Web Services And Design Methodologies.docx
mobicon_paper
Cross platform Web apps
Migrating from Desktop to Mobile
Online mapping with_the_google_maps_api
Intro to PhoneGap
Trip advsiorhybridpresentation
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
[English] Create Mobile LBS Application Using Maps API
3 Approaches to Mobile - An A to Z Primer.
Reactive web applications using MeteorJS

More from Start Pad (11)

PPTX
StartPad Countdown 4 - Windows Azure
PPT
Crystal Ball for your Internet Startup
PPT
StartPad Countdown 6 - ACLU 2.0: Demand Your dotRights
PPT
How To Wrangle A Team To Build Your Company
PPT
StartPad Countdown 0 - Save the Programmer. Save the Planet.
PPT
StartPad Countdown 2 - Startup Security: Hacking and Compliance in a Web 2.0 ...
PPT
StartPad Countdown 3 - (Patent Pending)
PPT
StartPad Countdown 5 - The App Engine That Google Built
PPT
StartPad Countdown 7 - Extreme Makeover Web Edition
PPT
StartPad Countdown 8 - Amazon Web Services and You
PPT
StartPad Countdown 9 - Corporate Structures, Common Problems
StartPad Countdown 4 - Windows Azure
Crystal Ball for your Internet Startup
StartPad Countdown 6 - ACLU 2.0: Demand Your dotRights
How To Wrangle A Team To Build Your Company
StartPad Countdown 0 - Save the Programmer. Save the Planet.
StartPad Countdown 2 - Startup Security: Hacking and Compliance in a Web 2.0 ...
StartPad Countdown 3 - (Patent Pending)
StartPad Countdown 5 - The App Engine That Google Built
StartPad Countdown 7 - Extreme Makeover Web Edition
StartPad Countdown 8 - Amazon Web Services and You
StartPad Countdown 9 - Corporate Structures, Common Problems

Recently uploaded (20)

PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PPTX
Pharma ospi slides which help in ospi learning
PDF
VCE English Exam - Section C Student Revision Booklet
PPTX
GDM (1) (1).pptx small presentation for students
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
GENETICS IN BIOLOGY IN SECONDARY LEVEL FORM 3
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PDF
Classroom Observation Tools for Teachers
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PPTX
Institutional Correction lecture only . . .
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
102 student loan defaulters named and shamed – Is someone you know on the list?
Final Presentation General Medicine 03-08-2024.pptx
Pharma ospi slides which help in ospi learning
VCE English Exam - Section C Student Revision Booklet
GDM (1) (1).pptx small presentation for students
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
GENETICS IN BIOLOGY IN SECONDARY LEVEL FORM 3
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
202450812 BayCHI UCSC-SV 20250812 v17.pptx
Microbial diseases, their pathogenesis and prophylaxis
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
Classroom Observation Tools for Teachers
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Institutional Correction lecture only . . .
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf

StartPad Countdown 5 - Google Geo: Mobile Mapping

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

Editor's Notes

  • #3: We're going to talk about the options for various devices.  Though we're all excited about the iPhone and Android and the other devices coming to the market with fully-featured browsers, I'll mention solutions for non-JS enabled devices. The static maps API, which I'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's hardware. And then there'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.
  • #4: 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'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?
  • #5: 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'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?
  • #7: Has streetview, polylines, and much more
  • #8: 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
  • #9:    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're designing for today's devices. (Numbers for 10kB, 50kB, 200kB file)
  • #11: 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.
  • #12: 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.
  • #15:    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've exposed the basic object that all of our models and views inherit from. This allows you to create rich applications fairly simply. We'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.
  • #16: 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.
  • #17:    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've exposed the basic object that all of our models and views inherit from. This allows you to create rich applications fairly simply. We'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.
  • #20: 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.
  • #21: 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.