Ubilabs: Google Maps API - Best Practices
8 likes4,304 views
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.
![SSttyyllee DDeeffiinniittiioonnSSttyyllee DDeeffiinniittiioonn
varvar stylesstyles == [[
{{
featureTypefeatureType:: "water""water",,
elementTypeelementType:: "all""all",,
stylersstylers:: [[
{{ saturationsaturation:: 5050 }},,
{{ huehue:: "#0091ff""#0091ff" }},,
{{ lightnesslightness:: --3030 }}
]]
}},,
......
];];
40 von 98](https://image.slidesharecdn.com/ubilabs-googlemapsapibestpractices-101112084230-phpapp02/85/Ubilabs-Google-Maps-API-Best-Practices-40-320.jpg)
![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](https://image.slidesharecdn.com/ubilabs-googlemapsapibestpractices-101112084230-phpapp02/85/Ubilabs-Google-Maps-API-Best-Practices-43-320.jpg)
![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](https://image.slidesharecdn.com/ubilabs-googlemapsapibestpractices-101112084230-phpapp02/85/Ubilabs-Google-Maps-API-Best-Practices-85-320.jpg)
![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](https://image.slidesharecdn.com/ubilabs-googlemapsapibestpractices-101112084230-phpapp02/85/Ubilabs-Google-Maps-API-Best-Practices-87-320.jpg)
Ubilabs: Google Maps API - Best Practices
- 1. GGooooggllee MMaappss AAPPIIGGooooggllee MMaappss AAPPII BBeesstt PPrraaccttiicceessBBeesstt PPrraaccttiicceess Martin Kleppe (@aemkei)Martin Kleppe (@aemkei) 1 von 98
- 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 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
- 15. LLeett''ss ttaallkk aabboouutt …LLeett''ss ttaallkk aabboouutt … 15 von 98
- 16. DDeessiiggnnDDeessiiggnn Keep DefaultsKeep Defaults Shapes on the MapShapes on the Map Color PaletteColor Palette 16 von 98
- 18. 18 von 98
- 19. 19 von 98
- 20. 20 von 98
- 21. MMaarrkkeerr == PPooiinntteerrMMaarrkkeerr == PPooiinntteerr 21 von 98
- 22. 22 von 98
- 23. 23 von 98
- 25. 25 von 98
- 26. 26 von 98
- 27. 27 von 98
- 28. 28 von 98
- 29. 29 von 98
- 31. How many markersHow many markers do you see on thedo you see on the following slide?following slide? 31 von 98
- 32. 32 von 98
- 33. GGAAMMEE OOVVEERRGGAAMMEE OOVVEERR Time is up!Time is up! 33 von 98
- 34. None ?None ? One ?One ? Two ?Two ? Three ?Three ? Four ?Four ? Five ?Five ? Six or more ?Six or more ? 34 von 98
- 35. 35 von 98
- 38. 38 von 98
- 39. 39 von 98
- 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 von 98
- 42. 42 von 98
- 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
- 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. 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. 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. LLooaadd oonn DDeemmaannddLLooaadd oonn DDeemmaanndd 48 von 98
- 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. 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. 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. 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. PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess -- -- -- DO NOT USE THE JAVASCRIPT API !DO NOT USE THE JAVASCRIPT API ! 53 von 98
- 54. 54 von 98
- 55. SSttaattiicc MMaappssSSttaattiicc MMaappss No JavaScriptNo JavaScript Single IMG tagSingle IMG tag Fast as hellFast as hell 55 von 98
- 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. SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse&&sizesize==512x512512x512&¢ercenter==HamburgHamburg&&zoomzoom==1212 57 von 98
- 58. SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &¢ercenter==HamburgHamburg &&zoomzoom==1212 58 von 98
- 59. 59 von 98
- 60. SSttyylleedd SSttaattiicc MMaappssSSttyylleedd SSttaattiicc MMaappss httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &¢ercenter==HamburgHamburg &&zoomzoom==1212 &&stylestyle== featurefeature::allall|| elementelement::geometrygeometry|| saturationsaturation::--100100 &&stylestyle== ...... 60 von 98
- 61. 61 von 98
- 62. 62 von 98
- 64. 64 von 98
- 65. 65 von 98
- 66. LLaarrggee DDaattaa SSeettssLLaarrggee DDaattaa SSeettss 66 von 98
- 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 von 98
- 69. 69 von 98
- 70. 70 von 98
- 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. MMiiccrrooffoorrmmaattssMMiiccrrooffoorrmmaattss Human readableHuman readable Recognized by GoogleRecognized by Google YOU can map itYOU can map it 73 von 98
- 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. 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. CCSSSSCCSSSS .geo.geo {{ display:display: nonenone;; }} VViissuuaall OOuuttppuuttVViissuuaall OOuuttppuutt Juliusstraße 25, Hamburg, GermanyJuliusstraße 25, Hamburg, Germany 76 von 98
- 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
- 79. NNoo SSeerrvveerr??NNoo SSeerrvveerr?? 79 von 98
- 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
- 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 von 98
- 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. 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. 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. EEvveenntt TTrraacckkiinnggEEvveenntt TTrraacckkiinngg pageTrackerpageTracker.._trackEvent_trackEvent(( 'category''category',, 'action''action',, 'label (optional)''label (optional)',, 'value (optional)''value (optional)' );); 90 von 98
- 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 von 98
- 93. 93 von 98
- 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. 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. 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 von 98