Ubilabs: Google Maps API - Best Practices

Google Maps API B e s t P ra c t i c e s Martin Kleppe (@aemkei) 1 von 98

About Me Google Qualified Developer Proctor JS Maps API Ubilabs - Location based Media Head 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

Today 's Topics Design Performance Data Tools 14 von 98

Let 's talk about … 15 von 98

Design Keep Defaults Shapes on the Map Color Palette 16 von 98

Marker 17 von 98

18 von 98

19 von 98

20 von 98

Marker = Pointer 21 von 98

22 von 98

23 von 98

Infowindow 24 von 98

25 von 98

26 von 98

27 von 98

28 von 98

29 von 98

Color 30 von 98

How many markers do you see on the following slide? 31 von 98

32 von 98

G A M E OV E R Time is up! 33 von 98

None ? One ? Two ? Three ? Four ? Five ? Six or more ? 34 von 98

35 von 98

Reserved Colors 36 von 98

Styled Maps 37 von 98

38 von 98

39 von 98

S tty lle D e ffiin iittiio n S y e De n on var styles = [ { featureType: "water", featureType: elementType: "all", elementType: stylers: stylers: [ { saturation: 50 }, saturation: { hue: "#0091ff" }, hue: { lightness: -30 } lightness: ] }, ... ]; 40 von 98

41 von 98

42 von 98

S e tt M a p S tty lle Se Map S y e var styles = [ ... ]; var my_style = new google.maps.StyledMapType( google.maps.StyledMapType( styles, styles, { map: map, name: 'My Style' } map: map, name: ); map.mapTypes.set('My Style', my_style); map.mapTypes.set( my_style); map.setMapTypeId('My Style'); map.setMapTypeId( 43 von 98

Performance 44 von 98

Basic Rules Put JS at the bottom Load scripts and data on demand Reduce set of DOM elements 45 von 98

P u tt S c r iip tts a tt B o tttto m Pu Scr p s a Bo om <html> <head> <title>Title</title> <title>Title</title> <link type="text/css" rel="stylesheet" … /> type= rel= <script type="text/javascript" … ></script> type= </head> <body> ... </body> </html> 46 von 98

P u tt S c r iip tts a tt B o tttto m Pu Scr p s a Bo om <html> <head> <title>Title</title> <title>Title</title> <link type="text/css" rel="stylesheet" … /> type= rel= </head> <body> ... <script type="text/javascript" … ></script> type= </body> </html> 47 von 98

Load on Demand 48 von 98

G o o g lle L o a d e r Goog e Loader <script type="text/javascript" type= src="http://www.google.com/jsapi?key=XYZ" src= ></script> google.load("maps", "3", { google.load( other_params: "sensor=false", other_params: callback: callback: api_loaded }); 49 von 98

P lla iin JJa v a S c r iip tt P a n avaScr p var script = document.createElement("script"), document.createElement( url = "http://maps.google.com/maps/api/js"; url += "?sensor=false"; url += "&callback=api_loaded"; script.type = "text/javascript"; script. script. script.src = url; url; document.body.appendChild(script); document.body.appendChild(script); 50 von 98

jjQ u e r y S tty lle Query S y e var url = "http://maps.google.com/maps/api/js?" + "sensor=false&"; "callback=?"; $.getJSON(url, api_loaded); getJSON(url, api_loaded); 51 von 98

Perfomance Rules Put JS at the bottom Load scripts and data on demand Reduce set of DOM elements … 52 von 98

Perfomance Rules - - - DO NOT USE THE JAVASCRIPT API ! 53 von 98

54 von 98

Static Maps No JavaScript Single IMG tag Fast as hell 55 von 98

S iim p lle IIM G Ta g S m p e M G Ta g <img src="path_to_image" src= width="512" width= height="512" height= /> 56 von 98

S tty lle d S tta ttiic M a p s S y ed S a c Maps http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor=false&size=512x512&center=Hamburg&zoom= sensor=false&size=512x512&center=Hamburg&zoom=12 57 von 98

S tty lle d S tta ttiic M a p s S y ed S a c Maps http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor= sensor=false &size=512x512 size= &center=Hamburg center= &zoom=12 zoom= 58 von 98

59 von 98

S tty lle d S tta ttiic M a p s S y ed S a c Maps http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor= sensor=false &size=512x512 size= &center=Hamburg center= &zoom=12 zoom= &style= style= feature:all| feature:all| element:geometry| element:geometry| saturation: saturation:-100 &style= style= ... 60 von 98

61 von 98

62 von 98

C u s tto m M a r k e r s Cus om Markers http://maps.google.com/maps/api/staticmap? http://maps.google.com/maps/api/staticmap? sensor= sensor=false &size=512x512 size= &markers= markers= icon:http://my_domain.com/marker.png| icon:http://my_domain.com/marker.png| Hamburg 63 von 98

64 von 98

65 von 98

L a rg e D a t a S e t s 66 von 98

Fusion Table Import CSV or Excel Up to 100 MB Server side rendering 67 von 98

68 von 98

69 von 98

70 von 98

Indexing Data 71 von 98

Data Formats XML - Hard to handle HTML - Where to store the data? JSON - Small but not indexed 72 von 98

Microformats Human readable Recognized by Google YOU can map it 73 von 98

V C a r d Te m p lla tte V C a r d Te m p a e <div class="vcard"> class= <div class="adr"> class= <div> <span class="street-address">…</span>, class= </span>, <span class="locality">…</span>, class= </span>, <span class="country-name">…</span> class= </div> </div> <div class="geo"> class= <span class="latitude">…</span> class= <span class="longitude">…</span> class= </div> </div> 74 von 98

V C a r d S ttr u c ttu r e VC a r d S r u c u r e .vcard .adr .street-address "Juliusstraße 25" .locality "Hamburg" .country-name "Germany" .geo .latitude 53.55 .longitude 9.99 75 von 98

CSS CSS .geo { display: none; } none; V iis u a ll O u ttp u tt V sua Ou pu Juliusstraße 25, Hamburg, Germany 76 von 98

M a p V C a r d D a tta M a p VC a r d D a a var $items = $(".vcard"); $( // position every vcard element $items.each(function(){ $items.each(function(){ var $item = $(this), $(this), lat = $item.find(".latitude").html(), $item.find( ).html(), lng = $item.find(".longitude").html(), $item.find( ).html(), position = new google.maps.LatLng(lat, lng); google.maps.LatLng(lat, lng); ... }); 77 von 98

Tools 78 von 98

No Server? 79 von 98

No Problem! 80 von 98

Google Spreadsheets Import and edit your data No server setup Access via JSONP Create custom scripts and formulas 81 von 98

S p r e a d s h e e tt F o r m u lla s Spreadshee Formu as =SUM(A2;B2) SUM(A2;B2) =CONCAT(A2;B2) CONCAT(A2;B2) =UPPER(B2) UPPER(B2) … 82 von 98

S p r e a d s h e e tt F o r m u lla s Spreadshee Formu as =SUM(A2;B2) SUM(A2;B2) =CONCAT(A2;B2) CONCAT(A2;B2) =UPPER(B2) UPPER(B2) =MY_FORMULA(B2) MY_FORMULA(B2) … 83 von 98

S p r e a d s h e e tt F o r m u lla s Spreadshee Formu as =SUM(A2;B2) SUM(A2;B2) =CONCAT(A2;B2) CONCAT(A2;B2) =UPPER(B2) UPPER(B2) =MY_FORMULA(B2) MY_FORMULA(B2) =GEOCODE(B2) GEOCODE(B2) 84 von 98

G e o c o d e F o r m u lla Geocode Formu a var geocoder = Maps.newGeocoder(); Maps.newGeocoder(); function GEOCODE(address) { GEOCODE(address) if (!address){ return ""; } (!address) var results = geocoder.geocode(address).results; geocoder.geocode(address).results; if (results && results.length){ results.length) var location = results[0].geometry.location; results[ ].geometry.location; return location.lat + "," + location.lng; location. location.lng; } return ""; } 85 von 98

86 von 98

M a p S p r e a d s h e e tt D a tta Map Spreadshee Da a $.getJSON("MY_PUPLIC_SHEET_URL", data_loaded); getJSON( data_loaded); function data_loaded(data){ data_loaded(data) $.each(data.feed.entry, function(){ $.each(data.feed.entry, function(){ var geocode = this["gsx$geocode"]["$t"]; this[ var lat_lng = geocode.split(","), geocode.split( var position = new google.maps.LatLng( google.maps.LatLng( lat_lng[ lat_lng[0], lat_lng[ lat_lng[1] ); }); } 87 von 98

Google Analytics Problem: Single page view Solution: Track events Categories, actions, labels, values 88 von 98

P a g e Tr a c k iin g P a g e Tr a c k n g // track current page pageTracker._trackPageview(); pageTracker._trackPageview(); // track a virutal page view pageTracker._trackPageview( pageTracker._trackPageview( "/path/to/virtual/page.html" ); // example: virtual map view pageTracker._trackPageview( pageTracker._trackPageview( "/map/germany/berlin/reichstag" ); 89 von 98

E v e n tt Tr a c k iin g E v e n Tr a c k n g pageTracker._trackEvent( pageTracker._trackEvent( 'category', 'action', 'label (optional)', 'value (optional)' ); 90 von 98

Tr a c k M a r k e r E v e n tts Tr a c k M a r k e r E v e n s google.maps.event.addListener( google.maps.event.addListener( marker, marker, 'click', track_click }); function track_click(){ track_click(){ pageTracker._trackEvent([ pageTracker._trackEvent([ 'Marker', 'Click', marker_title ); } 91 von 98

92 von 98

93 von 98

Hints 94 von 98

English Docs Rocks! code.google.com/intl/de-DE/apis/maps/ code.google.com/intl/en/apis/maps/ ! 95 von 98

Get Qualified! http://code.google.com/qualify/ Maps applications Community participation References 2 hour exam 96 von 98

Thanks! M a r t i n K lle p p e (@aemkei) Martin K eppe kleppe@ubilabs.net Download: http://go.ubilabs.net/gddde 97 von 98

98 von 98

http://blog.ubilabs.net	48
http://www.thinky.org	19
http://translate.googleusercontent.com	1
http://safe.tumblr.com	1

Ubilabs: Google Maps API - Best Practices

by Martin K on Nov 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 69

Statistics

Ubilabs: Google Maps API - Best Practices — Presentation Transcript