1. Google Maps API

2. Today’s Objectives Get Google Maps working: desktop + mobile Get clustering data complete, data onto a map

3. Documentation http://code.google.com/apis/maps/document ation/javascript/tutorial.html 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

4. Why Google Maps Data / Visualizations Driving directions, integration SEO (wait, how)

5. Embedding a Map #1 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 400px; width: 600px;}

6. Embedding a Map #2 function initialize() { var latlng = new google.maps.LatLng(42.740457, -73.701782); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

7. Embedding a Map #3

8. In Class Get a Map on a page.

9. 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: > )}

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

11. 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);

12. Other stuff Polygons – http://code.google.com/apis/maps/documentation/ja vascript/examples/circle-simple.html 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/overlays.html – http://code.google.com/apis/maps/documentation/ja vascript/examples/groundoverlay-simple.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

13. 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