Google Maps API
advertisement
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, userscalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 400px; width: 600px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Embedding a Map #2
<script type="text/javascript">
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);
}
</script>
Embedding a Map #3
</head>
<body onload="initialize()">
<div id="map_canvas" style=“”></div>
</body>
</html>
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: <<name of your google map object>>
)}
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
