Google Maps API

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

Documentation ation/javascript/tutorial.html 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 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 400px; width: 600px;}

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

Embedding a Map #3

In Class Get a Map on a page.

Adding Pins (Google calls the markers) var pinpoint = new google.maps.LatLng( , ); 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 – vascript/examples/circle-simple.html vascript/examples/circle-simple.html Overlays – vascript/overlays.html vascript/overlays.html – vascript/examples/groundoverlay-simple.html 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