• 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.

Ubilabs: Google Maps API - Best Practices

  • 4,538 views
Uploaded on

What We Have Learned - Google Maps API Best Practices …

What We Have Learned - Google Maps API Best Practices

Wie gehen wir im Browser mit tausenden von Geo-Daten um? Welches Design ist am besten für deine App geeignet? Wie kannst du die Performance auf mobilen Geräten optimieren?

Hacks & Tweaks: Martin Kleppe zeigt an praktischen Beispiele, wie man die verschiedenen Komponenten der Google Maps API effektiv kombinieren kann.

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
No Downloads

Views

Total Views
4,538
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
95
Comments
0
Likes
7

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. Google Maps API B e s t P ra c t i c e s Martin Kleppe (@aemkei) 1 von 98
  • 2. About Me Google Qualified Developer Proctor JS Maps API Ubilabs - Location based Media Head of Development 2 von 98
  • 3. 3 von 98
  • 4. 4 von 98
  • 5. 5 von 98
  • 6. 6 von 98
  • 7. 7 von 98
  • 8. 8 von 98
  • 9. 9 von 98
  • 10. 10 von 98
  • 11. 11 von 98
  • 12. 12 von 98
  • 13. 13 von 98
  • 14. Today 's Topics Design Performance Data Tools 14 von 98
  • 15. Let 's talk about … 15 von 98
  • 16. Design Keep Defaults Shapes on the Map Color Palette 16 von 98
  • 17. Marker 17 von 98
  • 18. 18 von 98
  • 19. 19 von 98
  • 20. 20 von 98
  • 21. Marker = Pointer 21 von 98
  • 22. 22 von 98
  • 23. 23 von 98
  • 24. Infowindow 24 von 98
  • 25. 25 von 98
  • 26. 26 von 98
  • 27. 27 von 98
  • 28. 28 von 98
  • 29. 29 von 98
  • 30. Color 30 von 98
  • 31. How many markers do you see on the following slide? 31 von 98
  • 32. 32 von 98
  • 33. G A M E OV E R Time is up! 33 von 98
  • 34. None ? One ? Two ? Three ? Four ? Five ? Six or more ? 34 von 98
  • 35. 35 von 98
  • 36. Reserved Colors 36 von 98
  • 37. Styled Maps 37 von 98
  • 38. 38 von 98
  • 39. 39 von 98
  • 40. S tty lle D e ffiin iittiio n S y e De n on var styles = [ { featureType: "water", featureType: elementType: "all", elementType: stylers: stylers: [ { saturation: 50 }, saturation: { hue: "#0091ff" }, hue: { lightness: -30 } lightness: ] }, ... ]; 40 von 98
  • 41. 41 von 98
  • 42. 42 von 98
  • 43. S e tt M a p S tty lle Se Map S y e var styles = [ ... ]; var my_style = new google.maps.StyledMapType( google.maps.StyledMapType( styles, styles, { map: map, name: 'My Style' } map: map, name: ); map.mapTypes.set('My Style', my_style); map.mapTypes.set( my_style); map.setMapTypeId('My Style'); map.setMapTypeId( 43 von 98
  • 44. Performance 44 von 98
  • 45. Basic Rules Put JS at the bottom Load scripts and data on demand Reduce set of DOM elements 45 von 98
  • 46. P u tt S c r iip tts a tt B o tttto m Pu Scr p s a Bo om <html> <head> <title>Title</title> <title>Title</title> <link type="text/css" rel="stylesheet" … /> type= rel= <script type="text/javascript" … ></script> type= </head> <body> ... </body> </html> 46 von 98
  • 47. P u tt S c r iip tts a tt B o tttto m Pu Scr p s a Bo om <html> <head> <title>Title</title> <title>Title</title> <link type="text/css" rel="stylesheet" … /> type= rel= </head> <body> ... <script type="text/javascript" … ></script> type= </body> </html> 47 von 98
  • 48. Load on Demand 48 von 98
  • 49. G o o g lle L o a d e r Goog e Loader <script type="text/javascript" type= src="http://www.google.com/jsapi?key=XYZ" src= ></script> google.load("maps", "3", { google.load( other_params: "sensor=false", other_params: callback: callback: api_loaded }); 49 von 98
  • 50. P lla iin JJa v a S c r iip tt P a n avaScr p var script = document.createElement("script"), document.createElement( url = "http://maps.google.com/maps/api/js"; url += "?sensor=false"; url += "&callback=api_loaded"; script.type = "text/javascript"; script. script. script.src = url; url; document.body.appendChild(script); document.body.appendChild(script); 50 von 98
  • 51. jjQ u e r y S tty lle Query S y e var url = "http://maps.google.com/maps/api/js?" + "sensor=false&"; "callback=?"; $.getJSON(url, api_loaded); getJSON(url, api_loaded); 51 von 98
  • 52. Perfomance Rules Put JS at the bottom Load scripts and data on demand Reduce set of DOM elements … 52 von 98
  • 53. Perfomance Rules - - - DO NOT USE THE JAVASCRIPT API ! 53 von 98
  • 54. 54 von 98
  • 55. Static Maps No JavaScript Single IMG tag Fast as hell 55 von 98
  • 56. S iim p lle IIM G Ta g S m p e M G Ta g <img src="path_to_image" src= width="512" width= height="512" height= /> 56 von 98
  • 57. S tty lle d S tta ttiic M a p s S y ed S a c Maps http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor=false&size=512x512&center=Hamburg&zoom= sensor=false&size=512x512&center=Hamburg&zoom=12 57 von 98
  • 58. S tty lle d S tta ttiic M a p s S y ed S a c Maps http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor= sensor=false &size=512x512 size= &center=Hamburg center= &zoom=12 zoom= 58 von 98
  • 59. 59 von 98
  • 60. S tty lle d S tta ttiic M a p s S y ed S a c Maps http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor= sensor=false &size=512x512 size= &center=Hamburg center= &zoom=12 zoom= &style= style= feature:all| feature:all| element:geometry| element:geometry| saturation: saturation:-100 &style= style= ... 60 von 98
  • 61. 61 von 98
  • 62. 62 von 98
  • 63. C u s tto m M a r k e r s Cus om Markers http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor= sensor=false &size=512x512 size= &markers= markers= icon:http://my_domain.com/marker.png| icon:http://my_domain.com/marker.png| Hamburg 63 von 98
  • 64. 64 von 98
  • 65. 65 von 98
  • 66. L a rg e D a t a S e t s 66 von 98
  • 67. Fusion Table Import CSV or Excel Up to 100 MB Server side rendering 67 von 98
  • 68. 68 von 98
  • 69. 69 von 98
  • 70. 70 von 98
  • 71. Indexing Data 71 von 98
  • 72. Data Formats XML - Hard to handle HTML - Where to store the data? JSON - Small but not indexed 72 von 98
  • 73. Microformats Human readable Recognized by Google YOU can map it 73 von 98
  • 74. V C a r d Te m p lla tte V C a r d Te m p a e <div class="vcard"> class= <div class="adr"> class= <div> <span class="street-address">…</span>, class= </span>, <span class="locality">…</span>, class= </span>, <span class="country-name">…</span> class= </div> </div> <div class="geo"> class= <span class="latitude">…</span> class= <span class="longitude">…</span> class= </div> </div> 74 von 98
  • 75. V C a r d S ttr u c ttu r e VC a r d S r u c u r e .vcard .adr .street-address "Juliusstraße 25" .locality "Hamburg" .country-name "Germany" .geo .latitude 53.55 .longitude 9.99 75 von 98
  • 76. CSS CSS .geo { display: none; } none; V iis u a ll O u ttp u tt V sua Ou pu Juliusstraße 25, Hamburg, Germany 76 von 98
  • 77. M a p V C a r d D a tta M a p VC a r d D a a var $items = $(".vcard"); $( // position every vcard element $items.each(function(){ $items.each(function(){ var $item = $(this), $(this), lat = $item.find(".latitude").html(), $item.find( ).html(), lng = $item.find(".longitude").html(), $item.find( ).html(), position = new google.maps.LatLng(lat, lng); google.maps.LatLng(lat, lng); ... }); 77 von 98
  • 78. Tools 78 von 98
  • 79. No Server? 79 von 98
  • 80. No Problem! 80 von 98
  • 81. Google Spreadsheets Import and edit your data No server setup Access via JSONP Create custom scripts and formulas 81 von 98
  • 82. S p r e a d s h e e tt F o r m u lla s Spreadshee Formu as =SUM(A2;B2) SUM(A2;B2) =CONCAT(A2;B2) CONCAT(A2;B2) =UPPER(B2) UPPER(B2) … 82 von 98
  • 83. S p r e a d s h e e tt F o r m u lla s Spreadshee Formu as =SUM(A2;B2) SUM(A2;B2) =CONCAT(A2;B2) CONCAT(A2;B2) =UPPER(B2) UPPER(B2) =MY_FORMULA(B2) MY_FORMULA(B2) … 83 von 98
  • 84. S p r e a d s h e e tt F o r m u lla s Spreadshee Formu as =SUM(A2;B2) SUM(A2;B2) =CONCAT(A2;B2) CONCAT(A2;B2) =UPPER(B2) UPPER(B2) =MY_FORMULA(B2) MY_FORMULA(B2) =GEOCODE(B2) GEOCODE(B2) 84 von 98
  • 85. G e o c o d e F o r m u lla Geocode Formu a var geocoder = Maps.newGeocoder(); Maps.newGeocoder(); function GEOCODE(address) { GEOCODE(address) if (!address){ return ""; } (!address) var results = geocoder.geocode(address).results; geocoder.geocode(address).results; if (results && results.length){ results.length) var location = results[0].geometry.location; results[ ].geometry.location; return location.lat + "," + location.lng; location. location.lng; } return ""; } 85 von 98
  • 86. 86 von 98
  • 87. M a p S p r e a d s h e e tt D a tta Map Spreadshee Da a $.getJSON("MY_PUPLIC_SHEET_URL", data_loaded); getJSON( data_loaded); function data_loaded(data){ data_loaded(data) $.each(data.feed.entry, function(){ $.each(data.feed.entry, function(){ var geocode = this["gsx$geocode"]["$t"]; this[ var lat_lng = geocode.split(","), geocode.split( var position = new google.maps.LatLng( google.maps.LatLng( lat_lng[ lat_lng[0], lat_lng[ lat_lng[1] ); }); } 87 von 98
  • 88. Google Analytics Problem: Single page view Solution: Track events Categories, actions, labels, values 88 von 98
  • 89. P a g e Tr a c k iin g P a g e Tr a c k n g // track current page pageTracker._trackPageview(); pageTracker._trackPageview(); // track a virutal page view pageTracker._trackPageview( pageTracker._trackPageview( "/path/to/virtual/page.html" ); // example: virtual map view pageTracker._trackPageview( pageTracker._trackPageview( "/map/germany/berlin/reichstag" ); 89 von 98
  • 90. E v e n tt Tr a c k iin g E v e n Tr a c k n g pageTracker._trackEvent( pageTracker._trackEvent( 'category', 'action', 'label (optional)', 'value (optional)' ); 90 von 98
  • 91. Tr a c k M a r k e r E v e n tts Tr a c k M a r k e r E v e n s google.maps.event.addListener( google.maps.event.addListener( marker, marker, 'click', track_click }); function track_click(){ track_click(){ pageTracker._trackEvent([ pageTracker._trackEvent([ 'Marker', 'Click', marker_title ); } 91 von 98
  • 92. 92 von 98
  • 93. 93 von 98
  • 94. Hints 94 von 98
  • 95. English Docs Rocks! code.google.com/intl/de-DE/apis/maps/ code.google.com/intl/en/apis/maps/ ! 95 von 98
  • 96. Get Qualified! http://code.google.com/qualify/ Maps applications Community participation References 2 hour exam 96 von 98
  • 97. Thanks! M a r t i n K lle p p e (@aemkei) Martin K eppe kleppe@ubilabs.net Download: http://go.ubilabs.net/gddde 97 von 98
  • 98. 98 von 98