Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Ubilabs: Google Maps API - Best Practices

on

  • 5,184 views

What We Have Learned - Google Maps API Best Practices ...

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.

Statistics

Views

Total Views
5,184
Views on SlideShare
5,028
Embed Views
156

Actions

Likes
7
Downloads
93
Comments
0

6 Embeds 156

http://blog.ubilabs.net 104
http://lanyrd.com 30
http://www.thinky.org 19
http://translate.googleusercontent.com 1
http://safe.tumblr.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ubilabs: Google Maps API - Best Practices Ubilabs: Google Maps API - Best Practices Presentation Transcript

  • 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