Ubilabs: Google Maps API - Best Practices

GGooooggllee MMaappss AAPPIIGGooooggllee MMaappss AAPPII
BBeesstt PPrraaccttiicceessBBeesstt PPrraaccttiicceess
Martin Kleppe (@aemkei)Martin Kleppe (@aemkei)
1 von 98

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

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

MMaarrkkeerr == PPooiinntteerrMMaarrkkeerr == PPooiinntteerr
21 von 98

IInnffoowwiinnddoowwIInnffoowwiinnddooww
24 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

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

RReesseerrvveedd CCoolloorrssRReesseerrvveedd CCoolloorrss
36 von 98

SSttyylleedd MMaappssSSttyylleedd MMaappss
37 von 98

SSttyyllee DDeeffiinniittiioonnSSttyyllee DDeeffiinniittiioonn
varvar stylesstyles == [[
{{
featureTypefeatureType:: "water""water",,
elementTypeelementType:: "all""all",,
stylersstylers:: [[
{{ saturationsaturation:: 5050 }},,
{{ huehue:: "#0091ff""#0091ff" }},,
{{ lightnesslightness:: --3030 }}
]]
}},,
......
];];
40 von 98

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

PPeerrffoorrmmaanncceePPeerrffoorrmmaannccee
44 von 98

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

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

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

LLooaadd oonn DDeemmaannddLLooaadd oonn DDeemmaanndd
48 von 98

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

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

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

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

PPeerrffoommaannccee RRuulleessPPeerrffoommaannccee RRuulleess
--
--
--
DO NOT USE THE JAVASCRIPT API !DO NOT USE THE JAVASCRIPT API !
53 von 98

SSttaattiicc MMaappssSSttaattiicc MMaappss
No JavaScriptNo JavaScript
Single IMG tagSingle IMG tag
Fast as hellFast as hell
55 von 98

SSiimmppllee IIMMGG TTaaggSSiimmppllee IIMMGG TTaagg
<img<img
srcsrc=="path_to_image""path_to_image"
widthwidth=="512""512"
heightheight=="512""512"
/>/>
56 von 98

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

sensorsensor==falsefalse
&&sizesize==512x512512x512
&&centercenter==HamburgHamburg
&&zoomzoom==1212
58 von 98

&&sizesize==512x512512x512
&&centercenter==HamburgHamburg
&&zoomzoom==1212
&&stylestyle==
featurefeature::allall||
elementelement::geometrygeometry||
saturationsaturation::--100100
&&stylestyle==
......
60 von 98

CCuussttoomm MMaarrkkeerrssCCuussttoomm MMaarrkkeerrss
&&sizesize==512x512512x512
&&markersmarkers==
iconicon::httphttp:://my//my_domain_domain..com/markercom/marker..pngpng||
HamburgHamburg
63 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 renderingServer side rendering
67 von 98

IInnddeexxiinngg DDaattaaIInnddeexxiinngg DDaattaa
71 von 98

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

MMiiccrrooffoorrmmaattssMMiiccrrooffoorrmmaattss
Human readableHuman readable
Recognized by GoogleRecognized by Google
YOU can map itYOU can map it
73 von 98

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

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

CCSSSSCCSSSS
.geo.geo {{ display:display: nonenone;; }}
VViissuuaall OOuuttppuuttVViissuuaall OOuuttppuutt
Juliusstraße 25, Hamburg, GermanyJuliusstraße 25, Hamburg, Germany
76 von 98

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

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 data
No server setupNo server setup
Access via JSONPAccess via JSONP
Create custom scripts and formulasCreate custom scripts and formulas
81 von 98

SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))
==CONCATCONCAT((A2A2;;B2B2))
==UPPERUPPER((B2B2))
……
82 von 98

==MY_FORMULAMY_FORMULA((B2B2))
……
83 von 98

==MY_FORMULAMY_FORMULA((B2B2))
==GEOCODEGEOCODE((B2B2))
84 von 98

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

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

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

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

EEvveenntt TTrraacckkiinnggEEvveenntt TTrraacckkiinngg
pageTrackerpageTracker.._trackEvent_trackEvent((
'category''category',,
'action''action',,
'label (optional)''label (optional)',,
'value (optional)''value (optional)'
););
90 von 98

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

HHiinnttssHHiinnttss
94 von 98

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

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

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

Ubilabs: Google Maps API - Best Practices

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

Ubilabs: Google Maps API - Best Practices