Ubilabs: Google Maps API - Best Practices
-
Upload
martin-kleppe -
Category
Technology
-
view
4.823 -
download
1
description
Transcript of Ubilabs: Google Maps API - Best Practices
![Page 1: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/1.jpg)
GGooooggllee MMaappss AAPPIIGGooooggllee MMaappss AAPPII
BBeesstt PPrraaccttiicceessBBeesstt PPrraaccttiicceess
Martin Kleppe (@aemkei)Martin Kleppe (@aemkei)
1 von 98
![Page 2: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/2.jpg)
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
![Page 3: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/3.jpg)
3 von 98
![Page 4: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/4.jpg)
4 von 98
![Page 5: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/5.jpg)
5 von 98
![Page 6: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/6.jpg)
6 von 98
![Page 7: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/7.jpg)
7 von 98
![Page 8: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/8.jpg)
8 von 98
![Page 9: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/9.jpg)
9 von 98
![Page 10: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/10.jpg)
10 von 98
![Page 11: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/11.jpg)
11 von 98
![Page 12: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/12.jpg)
12 von 98
![Page 13: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/13.jpg)
13 von 98
![Page 14: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/14.jpg)
TTooddaayy''ss TTooppiiccssTTooddaayy''ss TTooppiiccss
DesignDesign
PerformancePerformance
DataData
ToolsTools
14 von 98
![Page 15: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/15.jpg)
LLeett''ss ttaallkk aabboouutt …LLeett''ss ttaallkk aabboouutt …
15 von 98
![Page 16: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/16.jpg)
DDeessiiggnnDDeessiiggnn
Keep DefaultsKeep Defaults
Shapes on the MapShapes on the Map
Color PaletteColor Palette
16 von 98
![Page 17: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/17.jpg)
MMaarrkkeerrMMaarrkkeerr
17 von 98
![Page 18: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/18.jpg)
18 von 98
![Page 19: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/19.jpg)
19 von 98
![Page 20: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/20.jpg)
20 von 98
![Page 21: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/21.jpg)
MMaarrkkeerr == PPooiinntteerrMMaarrkkeerr == PPooiinntteerr
21 von 98
![Page 22: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/22.jpg)
22 von 98
![Page 23: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/23.jpg)
23 von 98
![Page 24: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/24.jpg)
IInnffoowwiinnddoowwIInnffoowwiinnddooww
24 von 98
![Page 25: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/25.jpg)
25 von 98
![Page 26: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/26.jpg)
26 von 98
![Page 27: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/27.jpg)
27 von 98
![Page 28: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/28.jpg)
28 von 98
![Page 29: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/29.jpg)
29 von 98
![Page 30: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/30.jpg)
CCoolloorrCCoolloorr
30 von 98
![Page 31: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/31.jpg)
How many markersHow many markers
do you see on thedo you see on the
following slide?following slide?
31 von 98
![Page 32: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/32.jpg)
32 von 98
![Page 33: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/33.jpg)
GGAAMMEE OOVVEERRGGAAMMEE OOVVEERR
Time is up!Time is up!
33 von 98
![Page 34: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/34.jpg)
None ?None ?
One ?One ?
Two ?Two ?
Three ?Three ?
Four ?Four ?
Five ?Five ?
Six or more ?Six or more ?
34 von 98
![Page 35: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/35.jpg)
35 von 98
![Page 36: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/36.jpg)
RReesseerrvveedd CCoolloorrssRReesseerrvveedd CCoolloorrss
36 von 98
![Page 37: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/37.jpg)
SSttyylleedd MMaappssSSttyylleedd MMaappss
37 von 98
![Page 38: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/38.jpg)
38 von 98
![Page 39: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/39.jpg)
39 von 98
![Page 40: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/40.jpg)
SSttyyllee DDeeffiinniittiioonnSSttyyllee DDeeffiinniittiioonn
varvar styles styles == [[ {{ featureType featureType:: "water""water",, elementType elementType:: "all""all",, stylers stylers:: [[ {{ saturation saturation:: 5050 }},, {{ hue hue:: "#0091ff""#0091ff" }},, {{ lightness lightness:: --3030 }} ]] }},, ......];];
40 von 98
![Page 41: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/41.jpg)
41 von 98
![Page 42: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/42.jpg)
42 von 98
![Page 43: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/43.jpg)
SSeett MMaapp SSttyylleeSSeett MMaapp SSttyyllee
varvar styles styles == [[ ...... ];];varvar my_style my_style == newnew google google..mapsmaps..StyledMapTypeStyledMapType(( styles styles,, {{ map map:: map map,, name name:: 'My Style''My Style' }}););
mapmap..mapTypesmapTypes..setset(('My Style''My Style',, my_style my_style););mapmap..setMapTypeIdsetMapTypeId(('My Style''My Style'););
43 von 98
![Page 44: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/44.jpg)
PPeerrffoorrmmaanncceePPeerrffoorrmmaannccee
44 von 98
![Page 45: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/45.jpg)
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
![Page 46: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/46.jpg)
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
![Page 47: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/47.jpg)
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
![Page 48: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/48.jpg)
LLooaadd oonn DDeemmaannddLLooaadd oonn DDeemmaanndd
48 von 98
![Page 49: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/49.jpg)
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_params other_params:: "sensor=false""sensor=false",, callback callback:: api_loaded api_loaded}}););
49 von 98
![Page 50: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/50.jpg)
PPllaaiinn JJaavvaaSSccrriippttPPllaaiinn JJaavvaaSSccrriipptt
varvar script script == document document..createElementcreateElement(("script""script"),), url url == "http://maps.google.com/maps/api/js""http://maps.google.com/maps/api/js";;
url url +=+= "?sensor=false""?sensor=false";;url url +=+= "&callback=api_loaded""&callback=api_loaded";;
scriptscript..type type == "text/javascript""text/javascript";;scriptscript..src src == url url;;documentdocument..bodybody..appendChildappendChild((scriptscript););
50 von 98
![Page 51: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/51.jpg)
jjQQuueerryy SSttyylleejjQQuueerryy SSttyyllee
varvar url url == "http://maps.google.com/maps/api/js?""http://maps.google.com/maps/api/js?" ++ "sensor=false&""sensor=false&";; "callback=?""callback=?";;
$$..getJSONgetJSON((urlurl,, api_loaded api_loaded););
51 von 98
![Page 52: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/52.jpg)
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
![Page 53: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/53.jpg)
PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess
--
--
--
DO NOT USE THE JAVASCRIPT API !DO NOT USE THE JAVASCRIPT API !
53 von 98
![Page 54: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/54.jpg)
54 von 98
![Page 55: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/55.jpg)
SSttaattiicc MMaappssSSttaattiicc MMaappss
No JavaScriptNo JavaScript
Single IMG tagSingle IMG tag
Fast as hellFast as hell
55 von 98
![Page 56: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/56.jpg)
SSiimmppllee IIMMGG TTaaggSSiimmppllee IIMMGG TTaagg
<img<img srcsrc=="path_to_image""path_to_image" widthwidth=="512""512" heightheight=="512""512"/>/>
56 von 98
![Page 57: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/57.jpg)
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
![Page 58: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/58.jpg)
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
![Page 59: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/59.jpg)
59 von 98
![Page 60: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/60.jpg)
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== feature feature::allall|| element element::geometrygeometry|| saturation saturation::--100100 &&stylestyle== ......
60 von 98
![Page 61: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/61.jpg)
61 von 98
![Page 62: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/62.jpg)
62 von 98
![Page 63: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/63.jpg)
CCuussttoomm MMaarrkkeerrssCCuussttoomm MMaarrkkeerrss
httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &&markersmarkers== icon icon::httphttp:://my//my_domain_domain..com/markercom/marker..pngpng|| Hamburg Hamburg
63 von 98
![Page 64: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/64.jpg)
64 von 98
![Page 65: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/65.jpg)
65 von 98
![Page 66: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/66.jpg)
LLaarrggee DDaattaa SSeettssLLaarrggee DDaattaa SSeettss
66 von 98
![Page 67: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/67.jpg)
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
![Page 68: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/68.jpg)
68 von 98
![Page 69: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/69.jpg)
69 von 98
![Page 70: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/70.jpg)
70 von 98
![Page 71: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/71.jpg)
IInnddeexxiinngg DDaattaaIInnddeexxiinngg DDaattaa
71 von 98
![Page 72: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/72.jpg)
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
![Page 73: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/73.jpg)
MMiiccrrooffoorrmmaattssMMiiccrrooffoorrmmaattss
Human readableHuman readable
Recognized by GoogleRecognized by Google
YOU can map itYOU can map it
73 von 98
![Page 74: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/74.jpg)
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
![Page 75: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/75.jpg)
VVCCaarrdd SSttrruuccttuurreeVVCCaarrdd SSttrruuccttuurree
..vcardvcard ..adradr ..street-addressstreet-address "Juliusstraße 25""Juliusstraße 25" ..locality locality "Hamburg""Hamburg" ..country-namecountry-name "Germany""Germany" ..geogeo ..latitude latitude 53.5553.55 ..longitude longitude 9.999.99
75 von 98
![Page 76: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/76.jpg)
CCSSSSCCSSSS
.geo.geo {{ display:display: nonenone; ; }}
VViissuuaall OOuuttppuuttVViissuuaall OOuuttppuutt
Juliusstraße 25, Hamburg, GermanyJuliusstraße 25, Hamburg, Germany
76 von 98
![Page 77: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/77.jpg)
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),), lat lat == $item $item..findfind((".latitude"".latitude").).htmlhtml(),(), lng lng == $item $item..findfind((".longitude"".longitude").).htmlhtml(),(), position position == newnew google google..mapsmaps..LatLngLatLng((latlat,, lng lng);); ......}}););
77 von 98
![Page 78: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/78.jpg)
TToooollssTToooollss
78 von 98
![Page 79: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/79.jpg)
NNoo SSeerrvveerr??NNoo SSeerrvveerr??
79 von 98
![Page 80: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/80.jpg)
NNoo PPrroobblleemm!!NNoo PPrroobblleemm!!
80 von 98
![Page 81: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/81.jpg)
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
![Page 82: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/82.jpg)
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))==CONCATCONCAT((A2A2;;B2B2))==UPPERUPPER((B2B2))
……
82 von 98
![Page 83: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/83.jpg)
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))==CONCATCONCAT((A2A2;;B2B2))==UPPERUPPER((B2B2))
==MY_FORMULAMY_FORMULA((B2B2))
……
83 von 98
![Page 84: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/84.jpg)
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))==CONCATCONCAT((A2A2;;B2B2))==UPPERUPPER((B2B2))
==MY_FORMULAMY_FORMULA((B2B2))
==GEOCODEGEOCODE((B2B2))
84 von 98
![Page 85: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/85.jpg)
GGeeooccooddee FFoorrmmuullaaGGeeooccooddee FFoorrmmuullaa
varvar geocoder geocoder == Maps Maps..newGeocodernewGeocoder();();
functionfunction GEOCODEGEOCODE((addressaddress)) {{ ifif (!(!addressaddress)){{ returnreturn """";; }} varvar results results == geocoder geocoder..geocodegeocode((addressaddress).).resultsresults;; ifif ((results results &&&& results results..lengthlength)){{ varvar location location == results results[[00].].geometrygeometry..locationlocation;; returnreturn location location..lat lat ++ ",""," ++ location location..lnglng;; }} returnreturn """";;}}
85 von 98
![Page 86: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/86.jpg)
86 von 98
![Page 87: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/87.jpg)
MMaapp SSpprreeaaddsshheeeett DDaattaaMMaapp SSpprreeaaddsshheeeett DDaattaa
$$..getJSONgetJSON(("MY_PUPLIC_SHEET_URL""MY_PUPLIC_SHEET_URL",, data_loaded data_loaded););
functionfunction data_loadeddata_loaded((datadata)){{ $ $..eacheach((datadata..feedfeed..entryentry,, functionfunction()(){{ varvar geocode geocode == thisthis[["gsx$geocode""gsx$geocode"][]["$t""$t"];]; varvar lat_lng lat_lng == geocode geocode..splitsplit((","","),), varvar position position == newnew google google..mapsmaps..LatLngLatLng(( lat_lng lat_lng[[00],], lat_lng lat_lng[[11]] );); }}););}}
87 von 98
![Page 88: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/88.jpg)
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
![Page 89: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/89.jpg)
PPaaggee TTrraacckkiinnggPPaaggee TTrraacckkiinngg
// track current page// track current pagepageTrackerpageTracker.._trackPageview_trackPageview();();
// track a virutal page view// track a virutal page viewpageTrackerpageTracker.._trackPageview_trackPageview(( "/path/to/virtual/page.html""/path/to/virtual/page.html"););
// example: virtual map view// example: virtual map viewpageTrackerpageTracker.._trackPageview_trackPageview(( "/map/germany/berlin/reichstag""/map/germany/berlin/reichstag"););
89 von 98
![Page 90: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/90.jpg)
EEvveenntt TTrraacckkiinnggEEvveenntt TTrraacckkiinngg
pageTrackerpageTracker.._trackEvent_trackEvent(( 'category''category',, 'action''action',, 'label (optional)''label (optional)',, 'value (optional)''value (optional)'););
90 von 98
![Page 91: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/91.jpg)
TTrraacckk MMaarrkkeerr EEvveennttssTTrraacckk MMaarrkkeerr EEvveennttss
googlegoogle..mapsmaps..eventevent..addListeneraddListener(( marker marker,, 'click''click',, track_click track_click}}););
functionfunction track_clicktrack_click()(){{ pageTracker pageTracker.._trackEvent_trackEvent([([ 'Marker''Marker',, 'Click''Click',, marker_title marker_title ););}}
91 von 98
![Page 92: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/92.jpg)
92 von 98
![Page 93: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/93.jpg)
93 von 98
![Page 94: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/94.jpg)
HHiinnttssHHiinnttss
94 von 98
![Page 95: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/95.jpg)
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
![Page 96: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/96.jpg)
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
![Page 97: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/97.jpg)
TThhaannkkss!!TThhaannkkss!!
MMaarrttiinn KKlleeppppeeMMaarrttiinn KKlleeppppee (@aemkei) (@aemkei)
[email protected]@ubilabs.net
Download: Download: http://go.ubilabs.net/gdddehttp://go.ubilabs.net/gddde
97 von 98
![Page 98: Ubilabs: Google Maps API - Best Practices](https://reader031.fdocuments.us/reader031/viewer/2022020207/554b7475b4c90564168b538d/html5/thumbnails/98.jpg)
98 von 98