Your SlideShare is downloading. ×
0
GGooooggllee MMaappss AAPPIIGGooooggllee MMaappss AAPPII
BBeesstt PPrraaccttiicceessBBeesstt PPrraaccttiicceess
Martin Kle...
AAbboouutt MMeeAAbboouutt MMee
Google Qualified DeveloperGoogle Qualified Developer
Proctor JS Maps APIProctor JS Maps API...
3 von 98
4 von 98
5 von 98
6 von 98
7 von 98
8 von 98
9 von 98
10 von 98
11 von 98
12 von 98
13 von 98
TTooddaayy''ss TTooppiiccssTTooddaayy''ss TTooppiiccss
DesignDesign
PerformancePerformance
DataData
ToolsTools
14 von 98
LLeett''ss ttaallkk aabboouutt …LLeett''ss ttaallkk aabboouutt …
15 von 98
DDeessiiggnnDDeessiiggnn
Keep DefaultsKeep Defaults
Shapes on the MapShapes on the Map
Color PaletteColor Palette
16 von 98
MMaarrkkeerrMMaarrkkeerr
17 von 98
18 von 98
19 von 98
20 von 98
MMaarrkkeerr == PPooiinntteerrMMaarrkkeerr == PPooiinntteerr
21 von 98
22 von 98
23 von 98
IInnffoowwiinnddoowwIInnffoowwiinnddooww
24 von 98
25 von 98
26 von 98
27 von 98
28 von 98
29 von 98
CCoolloorrCCoolloorr
30 von 98
How many markersHow many markers
do you see on thedo you see on the
following slide?following slide?
31 von 98
32 von 98
GGAAMMEE OOVVEERRGGAAMMEE OOVVEERR
Time is up!Time is up!
33 von 98
None ?None ?
One ?One ?
Two ?Two ?
Three ?Three ?
Four ?Four ?
Five ?Five ?
Six or more ?Six or more ?
34 von 98
35 von 98
RReesseerrvveedd CCoolloorrssRReesseerrvveedd CCoolloorrss
36 von 98
SSttyylleedd MMaappssSSttyylleedd MMaappss
37 von 98
38 von 98
39 von 98
SSttyyllee DDeeffiinniittiioonnSSttyyllee DDeeffiinniittiioonn
varvar stylesstyles == [[
{{
featureTypefeatureType:: "wate...
41 von 98
42 von 98
SSeett MMaapp SSttyylleeSSeett MMaapp SSttyyllee
varvar stylesstyles == [[ ...... ];];
varvar my_stylemy_style == newnew g...
PPeerrffoorrmmaanncceePPeerrffoorrmmaannccee
44 von 98
BBaassiicc RRuulleessBBaassiicc RRuulleess
Put JS at the bottomPut JS at the bottom
Load scripts and data on demandLoad sc...
PPuutt SSccrriippttss aatt BBoottttoommPPuutt SSccrriippttss aatt BBoottttoomm
<html><html>
<head><head>
<title><title>Tit...
PPuutt SSccrriippttss aatt BBoottttoommPPuutt SSccrriippttss aatt BBoottttoomm
<html><html>
<head><head>
<title><title>Tit...
LLooaadd oonn DDeemmaannddLLooaadd oonn DDeemmaanndd
48 von 98
GGooooggllee LLooaaddeerrGGooooggllee LLooaaddeerr
<script<script
typetype=="text/javascript""text/javascript"
srcsrc=="ht...
PPllaaiinn JJaavvaaSSccrriippttPPllaaiinn JJaavvaaSSccrriipptt
varvar scriptscript == documentdocument..createElementcreat...
jjQQuueerryy SSttyylleejjQQuueerryy SSttyyllee
varvar urlurl == "http://maps.google.com/maps/api/js?""http://maps.google.c...
PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess
Put JS at the bottomPut JS at the bottom
Load scripts and d...
PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess
--
--
--
DO NOT USE THE JAVASCRIPT API !DO NOT USE THE JAVA...
54 von 98
SSttaattiicc MMaappssSSttaattiicc MMaappss
No JavaScriptNo JavaScript
Single IMG tagSingle IMG tag
Fast as hellFast as hel...
SSiimmppllee IIMMGG TTaaggSSiimmppllee IIMMGG TTaagg
<img<img
srcsrc=="path_to_image""path_to_image"
widthwidth=="512""512...
SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss
httphttp:://maps//maps..googlegoogle..com/maps/api/st...
SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss
httphttp:://maps//maps..googlegoogle..com/maps/api/st...
59 von 98
SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss
httphttp:://maps//maps..googlegoogle..com/maps/api/st...
61 von 98
62 von 98
CCuussttoomm MMaarrkkeerrssCCuussttoomm MMaarrkkeerrss
httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/map...
64 von 98
65 von 98
LLaarrggee DDaattaa SSeettssLLaarrggee DDaattaa SSeettss
66 von 98
FFuussiioonn TTaabblleeFFuussiioonn TTaabbllee
Import CSV or ExcelImport CSV or Excel
Up to 100 MBUp to 100 MB
Server side...
68 von 98
69 von 98
70 von 98
IInnddeexxiinngg DDaattaaIInnddeexxiinngg DDaattaa
71 von 98
DDaattaa FFoorrmmaattssDDaattaa FFoorrmmaattss
XML - Hard to handleXML - Hard to handle
HTML - Where to store the data?HTM...
MMiiccrrooffoorrmmaattssMMiiccrrooffoorrmmaattss
Human readableHuman readable
Recognized by GoogleRecognized by Google
YOU...
VVCCaarrdd TTeemmppllaatteeVVCCaarrdd TTeemmppllaattee
<div<div classclass=="vcard""vcard">>
<div<div classclass=="adr""ad...
VVCCaarrdd SSttrruuccttuurreeVVCCaarrdd SSttrruuccttuurree
..vcardvcard
..adradr
..street-addressstreet-address "Juliusstr...
CCSSSSCCSSSS
.geo.geo {{ display:display: nonenone;; }}
VViissuuaall OOuuttppuuttVViissuuaall OOuuttppuutt
Juliusstraße 25...
MMaapp VVCCaarrdd DDaattaaMMaapp VVCCaarrdd DDaattaa
varvar $items$items == $$((".vcard"".vcard"););
// position every vca...
TToooollssTToooollss
78 von 98
NNoo SSeerrvveerr??NNoo SSeerrvveerr??
79 von 98
NNoo PPrroobblleemm!!NNoo PPrroobblleemm!!
80 von 98
GGooooggllee SSpprreeaaddsshheeeettssGGooooggllee SSpprreeaaddsshheeeettss
Import and edit your dataImport and edit your d...
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))
==CONCATCONCAT((A2A2...
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))
==CONCATCONCAT((A2A2...
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))
==CONCATCONCAT((A2A2...
GGeeooccooddee FFoorrmmuullaaGGeeooccooddee FFoorrmmuullaa
varvar geocodergeocoder == MapsMaps..newGeocodernewGeocoder();(...
86 von 98
MMaapp SSpprreeaaddsshheeeett DDaattaaMMaapp SSpprreeaaddsshheeeett DDaattaa
$$..getJSONgetJSON(("MY_PUPLIC_SHEET_URL""MY_...
GGooooggllee AAnnaallyyttiiccssGGooooggllee AAnnaallyyttiiccss
Problem: Single page viewProblem: Single page view
Solution...
PPaaggee TTrraacckkiinnggPPaaggee TTrraacckkiinngg
// track current page// track current page
pageTrackerpageTracker.._tra...
EEvveenntt TTrraacckkiinnggEEvveenntt TTrraacckkiinngg
pageTrackerpageTracker.._trackEvent_trackEvent((
'category''categor...
TTrraacckk MMaarrkkeerr EEvveennttssTTrraacckk MMaarrkkeerr EEvveennttss
googlegoogle..mapsmaps..eventevent..addListenerad...
92 von 98
93 von 98
HHiinnttssHHiinnttss
94 von 98
EEnngglliisshh DDooccss RRoocckkss!!EEnngglliisshh DDooccss RRoocckkss!!
code.google.com/intl/de-DE/apis/maps/code.google....
GGeett QQuuaalliiffiieedd!!GGeett QQuuaalliiffiieedd!!
http://code.google.com/qualify/http://code.google.com/qualify/
Maps...
TThhaannkkss!!TThhaannkkss!!
MMaarrttiinn KKlleeppppeeMMaarrttiinn KKlleeppppee (@aemkei)(@aemkei)
kleppe@ubilabs.netklepp...
98 von 98
Upcoming SlideShare
Loading in...5
×

Ubilabs: Google Maps API - Best Practices

4,955

Published on

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.

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

No Downloads
Views
Total Views
4,955
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
104
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Ubilabs: Google Maps API - Best Practices"

  1. 1. GGooooggllee MMaappss AAPPIIGGooooggllee MMaappss AAPPII BBeesstt PPrraaccttiicceessBBeesstt PPrraaccttiicceess Martin Kleppe (@aemkei)Martin Kleppe (@aemkei) 1 von 98
  2. 2. AAbboouutt MMeeAAbboouutt MMee Google Qualified DeveloperGoogle Qualified Developer Proctor JS Maps APIProctor JS Maps API Ubilabs - Location based MediaUbilabs - Location based Media Head of DevelopmentHead of Development 2 von 98
  3. 3. 3 von 98
  4. 4. 4 von 98
  5. 5. 5 von 98
  6. 6. 6 von 98
  7. 7. 7 von 98
  8. 8. 8 von 98
  9. 9. 9 von 98
  10. 10. 10 von 98
  11. 11. 11 von 98
  12. 12. 12 von 98
  13. 13. 13 von 98
  14. 14. TTooddaayy''ss TTooppiiccssTTooddaayy''ss TTooppiiccss DesignDesign PerformancePerformance DataData ToolsTools 14 von 98
  15. 15. LLeett''ss ttaallkk aabboouutt …LLeett''ss ttaallkk aabboouutt … 15 von 98
  16. 16. DDeessiiggnnDDeessiiggnn Keep DefaultsKeep Defaults Shapes on the MapShapes on the Map Color PaletteColor Palette 16 von 98
  17. 17. MMaarrkkeerrMMaarrkkeerr 17 von 98
  18. 18. 18 von 98
  19. 19. 19 von 98
  20. 20. 20 von 98
  21. 21. MMaarrkkeerr == PPooiinntteerrMMaarrkkeerr == PPooiinntteerr 21 von 98
  22. 22. 22 von 98
  23. 23. 23 von 98
  24. 24. IInnffoowwiinnddoowwIInnffoowwiinnddooww 24 von 98
  25. 25. 25 von 98
  26. 26. 26 von 98
  27. 27. 27 von 98
  28. 28. 28 von 98
  29. 29. 29 von 98
  30. 30. CCoolloorrCCoolloorr 30 von 98
  31. 31. How many markersHow many markers do you see on thedo you see on the following slide?following slide? 31 von 98
  32. 32. 32 von 98
  33. 33. GGAAMMEE OOVVEERRGGAAMMEE OOVVEERR Time is up!Time is up! 33 von 98
  34. 34. None ?None ? One ?One ? Two ?Two ? Three ?Three ? Four ?Four ? Five ?Five ? Six or more ?Six or more ? 34 von 98
  35. 35. 35 von 98
  36. 36. RReesseerrvveedd CCoolloorrssRReesseerrvveedd CCoolloorrss 36 von 98
  37. 37. SSttyylleedd MMaappssSSttyylleedd MMaappss 37 von 98
  38. 38. 38 von 98
  39. 39. 39 von 98
  40. 40. SSttyyllee DDeeffiinniittiioonnSSttyyllee DDeeffiinniittiioonn varvar stylesstyles == [[ {{ featureTypefeatureType:: "water""water",, elementTypeelementType:: "all""all",, stylersstylers:: [[ {{ saturationsaturation:: 5050 }},, {{ huehue:: "#0091ff""#0091ff" }},, {{ lightnesslightness:: --3030 }} ]] }},, ...... ];]; 40 von 98
  41. 41. 41 von 98
  42. 42. 42 von 98
  43. 43. SSeett MMaapp SSttyylleeSSeett MMaapp SSttyyllee varvar stylesstyles == [[ ...... ];]; varvar my_stylemy_style == newnew googlegoogle..mapsmaps..StyledMapTypeStyledMapType(( stylesstyles,, {{ mapmap:: mapmap,, namename:: 'My Style''My Style' }} );); mapmap..mapTypesmapTypes..setset(('My Style''My Style',, my_stylemy_style);); mapmap..setMapTypeIdsetMapTypeId(('My Style''My Style');); 43 von 98
  44. 44. PPeerrffoorrmmaanncceePPeerrffoorrmmaannccee 44 von 98
  45. 45. BBaassiicc RRuulleessBBaassiicc RRuulleess Put JS at the bottomPut JS at the bottom Load scripts and data on demandLoad scripts and data on demand Reduce set of DOM elementsReduce set of DOM elements 45 von 98
  46. 46. PPuutt SSccrriippttss aatt BBoottttoommPPuutt SSccrriippttss aatt BBoottttoomm <html><html> <head><head> <title><title>TitleTitle</title></title> <link<link typetype=="text/css""text/css" relrel=="stylesheet""stylesheet" …… />/> <script<script typetype=="text/javascript""text/javascript" …… ></script>></script> </head></head> <body><body> ...... </body></body> </html></html> 46 von 98
  47. 47. PPuutt SSccrriippttss aatt BBoottttoommPPuutt SSccrriippttss aatt BBoottttoomm <html><html> <head><head> <title><title>TitleTitle</title></title> <link<link typetype=="text/css""text/css" relrel=="stylesheet""stylesheet" …… />/> </head></head> <body><body> ...... <script<script typetype=="text/javascript""text/javascript" …… ></script>></script> </body></body> </html></html> 47 von 98
  48. 48. LLooaadd oonn DDeemmaannddLLooaadd oonn DDeemmaanndd 48 von 98
  49. 49. GGooooggllee LLooaaddeerrGGooooggllee LLooaaddeerr <script<script typetype=="text/javascript""text/javascript" srcsrc=="http://www.google.com/jsapi?key=XYZ""http://www.google.com/jsapi?key=XYZ" ></script>></script> googlegoogle..loadload(("maps""maps",, "3""3",, {{ other_paramsother_params:: "sensor=false""sensor=false",, callbackcallback:: api_loadedapi_loaded }});); 49 von 98
  50. 50. PPllaaiinn JJaavvaaSSccrriippttPPllaaiinn JJaavvaaSSccrriipptt varvar scriptscript == documentdocument..createElementcreateElement(("script""script"),), urlurl == "http://maps.google.com/maps/api/js""http://maps.google.com/maps/api/js";; urlurl +=+= "?sensor=false""?sensor=false";; urlurl +=+= "&callback=api_loaded""&callback=api_loaded";; scriptscript..typetype == "text/javascript""text/javascript";; scriptscript..srcsrc == urlurl;; documentdocument..bodybody..appendChildappendChild((scriptscript);); 50 von 98
  51. 51. jjQQuueerryy SSttyylleejjQQuueerryy SSttyyllee varvar urlurl == "http://maps.google.com/maps/api/js?""http://maps.google.com/maps/api/js?" ++ "sensor=false&""sensor=false&";; "callback=?""callback=?";; $$..getJSONgetJSON((urlurl,, api_loadedapi_loaded);); 51 von 98
  52. 52. PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess Put JS at the bottomPut JS at the bottom Load scripts and data on demandLoad scripts and data on demand Reduce set of DOM elementsReduce set of DOM elements …… 52 von 98
  53. 53. PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess -- -- -- DO NOT USE THE JAVASCRIPT API !DO NOT USE THE JAVASCRIPT API ! 53 von 98
  54. 54. 54 von 98
  55. 55. SSttaattiicc MMaappssSSttaattiicc MMaappss No JavaScriptNo JavaScript Single IMG tagSingle IMG tag Fast as hellFast as hell 55 von 98
  56. 56. SSiimmppllee IIMMGG TTaaggSSiimmppllee IIMMGG TTaagg <img<img srcsrc=="path_to_image""path_to_image" widthwidth=="512""512" heightheight=="512""512" />/> 56 von 98
  57. 57. SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse&&sizesize==512x512512x512&&centercenter==HamburgHamburg&&zoomzoom==1212 57 von 98
  58. 58. SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &&centercenter==HamburgHamburg &&zoomzoom==1212 58 von 98
  59. 59. 59 von 98
  60. 60. SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &&centercenter==HamburgHamburg &&zoomzoom==1212 &&stylestyle== featurefeature::allall|| elementelement::geometrygeometry|| saturationsaturation::--100100 &&stylestyle== ...... 60 von 98
  61. 61. 61 von 98
  62. 62. 62 von 98
  63. 63. CCuussttoomm MMaarrkkeerrssCCuussttoomm MMaarrkkeerrss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &&markersmarkers== iconicon::httphttp:://my//my_domain_domain..com/markercom/marker..pngpng|| HamburgHamburg 63 von 98
  64. 64. 64 von 98
  65. 65. 65 von 98
  66. 66. LLaarrggee DDaattaa SSeettssLLaarrggee DDaattaa SSeettss 66 von 98
  67. 67. FFuussiioonn TTaabblleeFFuussiioonn TTaabbllee Import CSV or ExcelImport CSV or Excel Up to 100 MBUp to 100 MB Server side renderingServer side rendering 67 von 98
  68. 68. 68 von 98
  69. 69. 69 von 98
  70. 70. 70 von 98
  71. 71. IInnddeexxiinngg DDaattaaIInnddeexxiinngg DDaattaa 71 von 98
  72. 72. DDaattaa FFoorrmmaattssDDaattaa FFoorrmmaattss XML - Hard to handleXML - Hard to handle HTML - Where to store the data?HTML - Where to store the data? JSON - Small but not indexedJSON - Small but not indexed 72 von 98
  73. 73. MMiiccrrooffoorrmmaattssMMiiccrrooffoorrmmaattss Human readableHuman readable Recognized by GoogleRecognized by Google YOU can map itYOU can map it 73 von 98
  74. 74. VVCCaarrdd TTeemmppllaatteeVVCCaarrdd TTeemmppllaattee <div<div classclass=="vcard""vcard">> <div<div classclass=="adr""adr">> <div><div> <span<span classclass=="street-address""street-address">>……</span></span>,, <span<span classclass=="locality""locality">>……</span></span>,, <span<span classclass=="country-name""country-name">>……</span></span> </div></div> </div></div> <div<div classclass=="geo""geo">> <span<span classclass=="latitude""latitude">>……</span></span> <span<span classclass=="longitude""longitude">>……</span></span> </div></div> </div></div> 74 von 98
  75. 75. VVCCaarrdd SSttrruuccttuurreeVVCCaarrdd SSttrruuccttuurree ..vcardvcard ..adradr ..street-addressstreet-address "Juliusstraße 25""Juliusstraße 25" ..localitylocality "Hamburg""Hamburg" ..country-namecountry-name "Germany""Germany" ..geogeo ..latitudelatitude 53.5553.55 ..longitudelongitude 9.999.99 75 von 98
  76. 76. CCSSSSCCSSSS .geo.geo {{ display:display: nonenone;; }} VViissuuaall OOuuttppuuttVViissuuaall OOuuttppuutt Juliusstraße 25, Hamburg, GermanyJuliusstraße 25, Hamburg, Germany 76 von 98
  77. 77. MMaapp VVCCaarrdd DDaattaaMMaapp VVCCaarrdd DDaattaa varvar $items$items == $$((".vcard"".vcard");); // position every vcard element// position every vcard element $items$items..eacheach((functionfunction()(){{ varvar $item$item == $$((thisthis),), latlat == $item$item..findfind((".latitude"".latitude").).htmlhtml(),(), lnglng == $item$item..findfind((".longitude"".longitude").).htmlhtml(),(), positionposition == newnew googlegoogle..mapsmaps..LatLngLatLng((latlat,, lnglng);); ...... }});); 77 von 98
  78. 78. TToooollssTToooollss 78 von 98
  79. 79. NNoo SSeerrvveerr??NNoo SSeerrvveerr?? 79 von 98
  80. 80. NNoo PPrroobblleemm!!NNoo PPrroobblleemm!! 80 von 98
  81. 81. GGooooggllee SSpprreeaaddsshheeeettssGGooooggllee SSpprreeaaddsshheeeettss Import and edit your dataImport and edit your data No server setupNo server setup Access via JSONPAccess via JSONP Create custom scripts and formulasCreate custom scripts and formulas 81 von 98
  82. 82. SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass ==SUMSUM((A2A2;;B2B2)) ==CONCATCONCAT((A2A2;;B2B2)) ==UPPERUPPER((B2B2)) …… 82 von 98
  83. 83. SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass ==SUMSUM((A2A2;;B2B2)) ==CONCATCONCAT((A2A2;;B2B2)) ==UPPERUPPER((B2B2)) ==MY_FORMULAMY_FORMULA((B2B2)) …… 83 von 98
  84. 84. SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass ==SUMSUM((A2A2;;B2B2)) ==CONCATCONCAT((A2A2;;B2B2)) ==UPPERUPPER((B2B2)) ==MY_FORMULAMY_FORMULA((B2B2)) ==GEOCODEGEOCODE((B2B2)) 84 von 98
  85. 85. GGeeooccooddee FFoorrmmuullaaGGeeooccooddee FFoorrmmuullaa varvar geocodergeocoder == MapsMaps..newGeocodernewGeocoder();(); functionfunction GEOCODEGEOCODE((addressaddress)) {{ ifif (!(!addressaddress)){{ returnreturn """";; }} varvar resultsresults == geocodergeocoder..geocodegeocode((addressaddress).).resultsresults;; ifif ((resultsresults &&&& resultsresults..lengthlength)){{ varvar locationlocation == resultsresults[[00].].geometrygeometry..locationlocation;; returnreturn locationlocation..latlat ++ ",""," ++ locationlocation..lnglng;; }} returnreturn """";; }} 85 von 98
  86. 86. 86 von 98
  87. 87. MMaapp SSpprreeaaddsshheeeett DDaattaaMMaapp SSpprreeaaddsshheeeett DDaattaa $$..getJSONgetJSON(("MY_PUPLIC_SHEET_URL""MY_PUPLIC_SHEET_URL",, data_loadeddata_loaded);); functionfunction data_loadeddata_loaded((datadata)){{ $$..eacheach((datadata..feedfeed..entryentry,, functionfunction()(){{ varvar geocodegeocode == thisthis[["gsx$geocode""gsx$geocode"][]["$t""$t"];]; varvar lat_lnglat_lng == geocodegeocode..splitsplit((","","),), varvar positionposition == newnew googlegoogle..mapsmaps..LatLngLatLng(( lat_lnglat_lng[[00],], lat_lnglat_lng[[11]] );); }});); }} 87 von 98
  88. 88. GGooooggllee AAnnaallyyttiiccssGGooooggllee AAnnaallyyttiiccss Problem: Single page viewProblem: Single page view Solution: Track eventsSolution: Track events Categories, actions, labels, valuesCategories, actions, labels, values 88 von 98
  89. 89. PPaaggee TTrraacckkiinnggPPaaggee TTrraacckkiinngg // track current page// track current page pageTrackerpageTracker.._trackPageview_trackPageview();(); // track a virutal page view// track a virutal page view pageTrackerpageTracker.._trackPageview_trackPageview(( "/path/to/virtual/page.html""/path/to/virtual/page.html" );); // example: virtual map view// example: virtual map view pageTrackerpageTracker.._trackPageview_trackPageview(( "/map/germany/berlin/reichstag""/map/germany/berlin/reichstag" );); 89 von 98
  90. 90. EEvveenntt TTrraacckkiinnggEEvveenntt TTrraacckkiinngg pageTrackerpageTracker.._trackEvent_trackEvent(( 'category''category',, 'action''action',, 'label (optional)''label (optional)',, 'value (optional)''value (optional)' );); 90 von 98
  91. 91. TTrraacckk MMaarrkkeerr EEvveennttssTTrraacckk MMaarrkkeerr EEvveennttss googlegoogle..mapsmaps..eventevent..addListeneraddListener(( markermarker,, 'click''click',, track_clicktrack_click }});); functionfunction track_clicktrack_click()(){{ pageTrackerpageTracker.._trackEvent_trackEvent([([ 'Marker''Marker',, 'Click''Click',, marker_titlemarker_title );); }} 91 von 98
  92. 92. 92 von 98
  93. 93. 93 von 98
  94. 94. HHiinnttssHHiinnttss 94 von 98
  95. 95. EEnngglliisshh DDooccss RRoocckkss!!EEnngglliisshh DDooccss RRoocckkss!! code.google.com/intl/de-DE/apis/maps/code.google.com/intl/de-DE/apis/maps/ code.google.com/intl/en/apis/maps/code.google.com/intl/en/apis/maps/ !! 95 von 98
  96. 96. GGeett QQuuaalliiffiieedd!!GGeett QQuuaalliiffiieedd!! http://code.google.com/qualify/http://code.google.com/qualify/ Maps applicationsMaps applications Community participationCommunity participation ReferencesReferences 2 hour exam2 hour exam 96 von 98
  97. 97. TThhaannkkss!!TThhaannkkss!! MMaarrttiinn KKlleeppppeeMMaarrttiinn KKlleeppppee (@aemkei)(@aemkei) kleppe@ubilabs.netkleppe@ubilabs.net Download:Download: http://go.ubilabs.net/gdddehttp://go.ubilabs.net/gddde 97 von 98
  98. 98. 98 von 98
  1. A particular slide catching your eye?

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

×