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

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&&centercenter==HamburgHamburg&&zoomzoom==1212

57 von 98

httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &&centercenter==HamburgHamburg &&zoomzoom==1212

58 von 98

59 von 98

httphttp:://maps//maps..googlegoogle..com/maps/api/staticmapcom/maps/api/staticmap?? sensorsensor==falsefalse &&sizesize==512x512512x512 &&centercenter==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

==MY_FORMULAMY_FORMULA((B2B2))

……

83 von 98

==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)

kleppe@ubilabs.netkleppe@ubilabs.net

Download: Download: http://go.ubilabs.net/gdddehttp://go.ubilabs.net/gddde

97 von 98

98 von 98

Ubilabs: Google Maps API - Best Practices

Technology

Transcript of Ubilabs: Google Maps API - Best Practices

Google Maps API - DevFest Karlsruhe

Activity Google Maps API

Mobile Application Development Google Maps Android API · Google Play Services ... Waterford Institute of Technology, Mobile Application Development Google Maps Android API 11/16.

Google Maps API for Android

Google Maps API Experimentsusers.monash.edu/.../DirectedStudy-GoogleMap(2009).pdf · 1 1. INTRODUCTION Web developers use Google Maps API to embed Google Maps in their web pages.

Genome Browser based on Google Maps API

Bus Stop Reminder With Google Maps API & Glympse API Technology

[Android] using google maps v2 api

Google Static Maps API. Tutorial

Advanced Google Maps API

MapUp Tlemcen - Google Maps API

Visualization Using the Google Maps API

Google Maps JS API

Google Maps Javascript API v3 Examples[1]

Google Static Maps API. Tutorial

Beginning google maps api 3

Precipitation Summary – Google Maps InterfaceThe “Precipitation Summary – Google Maps Interface” utilizes the Google Maps API to display provisional precipitation data obtained

Google Maps Android API V1 e V2

API de Google Maps

API Google Maps