Ubilabs: Google Maps API - Best Practices2. 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
31. How many markersHow many markers
do you see on thedo you see on the
following slide?following slide?
31 von 98
34. None ?None ?
One ?One ?
Two ?Two ?
Three ?Three ?
Four ?Four ?
Five ?Five ?
Six or more ?Six or more ?
34 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
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
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
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
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
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
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
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
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
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
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
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