![[Android] using google maps v2 api](https://static.fdocuments.in/doc/165x107/555ac6fbd8b42ab1128b50fc/android-using-google-maps-v2-api.jpg)
Ubilabs: Google Maps API - Best Practices
98
Google Maps API Google Maps API Best Practices Best Practices Martin Kleppe (@aemkei) Martin Kleppe (@aemkei) 1 von 98
-
Upload
martin-kleppe -
Category
Technology
-
view
4.822 -
download
1
description
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.
Transcript of 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
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 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
41 von 98
42 von 98
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
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_params other_params:: "sensor=false""sensor=false",, callback callback:: api_loaded api_loaded}}););
49 von 98
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
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
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
54 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&¢ercenter==HamburgHamburg&&zoomzoom==1212
57 von 98
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 von 98
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
61 von 98
62 von 98
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
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 renderingServer side rendering
67 von 98
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?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" ..locality locality "Hamburg""Hamburg" ..country-namecountry-name "Germany""Germany" ..geogeo ..latitude latitude 53.5553.55 ..longitude longitude 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),), 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
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
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))==CONCATCONCAT((A2A2;;B2B2))==UPPERUPPER((B2B2))
==MY_FORMULAMY_FORMULA((B2B2))
……
83 von 98
SSpprreeaaddsshheeeett FFoorrmmuullaassSSpprreeaaddsshheeeett FFoorrmmuullaass
==SUMSUM((A2A2;;B2B2))==CONCATCONCAT((A2A2;;B2B2))==UPPERUPPER((B2B2))
==MY_FORMULAMY_FORMULA((B2B2))
==GEOCODEGEOCODE((B2B2))
84 von 98
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
86 von 98
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
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 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
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(( 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
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.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)
[email protected]@ubilabs.net
Download: Download: http://go.ubilabs.net/gdddehttp://go.ubilabs.net/gddde
97 von 98
98 von 98
![Google Maps Javascript API v3 Examples[1]](https://static.fdocuments.in/doc/165x107/552e4d854a79597f578b48e0/google-maps-javascript-api-v3-examples1.jpg)
