1 / 13

Google Maps API

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/documentation/javascript/tutorial.html Watch out for v2 api tutorials V3 is HTML5 to support desktop + mobile stuff.

neena
Download Presentation

Google Maps API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/documentation/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 <!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=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>

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

  7. Embedding a Map #3 </head><body onload="initialize()">  <div id="map_canvas" style=“”></div></body> </html>

  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: <<name of your google map object>> )}

  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/javascript/examples/circle-simple.html • Overlays • http://code.google.com/apis/maps/documentation/javascript/overlays.html • http://code.google.com/apis/maps/documentation/javascript/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

More Related