Google Maps API

Today’s Objectives

• • Get Google Maps working: desktop + mobile Get clustering data complete, data onto a map

Documentation

• http://code.google.com/apis/maps/document ation/javascript/tutorial.html

• • Watch out for v2 api tutorials V3 is HTML5 to support desktop + mobile stuff

Why Google Maps

• • • Data / Visualizations Driving directions, integration SEO (wait, how)

Embedding a Map #1

Embedding a Map #2

Embedding a Map #3

In Class

Get a Map on a page.

Adding Pins

(Google calls the markers) var pinpoint = new google.maps.LatLng( 25.363882,131.044922); var pin = new google.maps.Marker({ position: pinpoint, map: <> )}

Add info balloons

…with listeners var infowindow = new google.maps.InfoWindow({‘Imma balloon’}); google.maps.event.addListener(pinpoint, 'click', function() { infowindow.open(map,marker); });

Adding lots of markers…

• • Arrays!

Loop over array of points Have an array of Markers var pinpoint = new google.maps.LatLng(points[i][lat], points[i][lon]); var infowindow = new google.maps.InfoWindow({‘points[i][desc]’}); markers[i] = new Array(pinpoint, infowindow);

Other stuff

• • • Polygons – http://code.google.com/apis/maps/documentation/ja vascript/examples/circle-simple.html

Overlays – http://code.google.com/apis/maps/documentation/ja vascript/overlays.html

– http://code.google.com/apis/maps/documentation/ja vascript/examples/groundoverlay-simple.html

Custom Control – In V3 we style google controls – In V2 you add listeners to any HTML object

More in class

• • • Get JSON feed from clustering team

I’m feeling a bit lost

– Author code that can create multiple markers from a JSON feed

I’m feeling a bit bored

– Author code that can create multiple circles from a JSON feed, each representing a cluster center – Set the size of the circle to represent the # of people in that cluster