Google Maps API

Google Maps API

• 1.
  Google Maps APIDr. Harry Chen CMSC 491S/691S March 26, 2008
• 2.
  Agenda “ Firehose” course on Google Maps API HelloWorld example Basic UI components Loading data Assignment #3
• 3.
  HelloWorld What happenedhere?
• 4.
  “View  Page Source” Google Maps API Key (required)
• 5.
  What’s involved Definea <div/> tag where the map is to be created (“map_canvas”) Load GMaps API in <head/> Register the “initialize()” function to be called when the event “onload” is fired
• 6.
  The initialize() functionChecks if your browser is supported by the GMaps API Creates a GMap2 object and initializes the map UI inside the DOM element ID “map_canvas” Centers the map to a given lat/lng value
• 7.
  Key Map ControlsControl: Zoom Control: Map Type Control: Overview http://code.google.com/apis/maps/documentation/controls.html#Controls_overview Control: Pan
• 8.
  Control Code Example
• 9.
  GMarker Markers :Use GMarker to create markers
• 10.
  Customize GMarker Useyour own marker icon Use a smaller marker icon http://code.google.com/apis/maps/documentation/overlays.html#Markers
• 11.
  OpenInfoWindowHtml This funccreates GMarker
• 12.
  On Creating GMarkerWe have seen how to create GMarkers on a map, and our data is hardwired Unless your map data is static, you will need to load location data dynamically How to load data?
• 13.
  On loading dataOption 1: Define data in the <head/> of your map page Option 2: Read from a GeoRSS file Option 3: Read from a KML file Option 4: Read from a custom XML file
• 14.
  Read from aGeoRSS/KML file What’s GeoRSS? What’s KML? So easy!
• 15.
  Read from acustom XML file Some app only produce proprietary data in XML In order to render this data on a map, you must read and parse XML Sounds complicated?
• 16.
  Read from acustom XML GDownloadUrl: Built-in for downloading any data from a remote URL GXml: XML parser!
• 17.
  Resources Google Maps’Developer Guide http://code.google.com/apis/maps/documentation/index.html Mike Williams’s Google Maps API Tutorial http://econym.googlepages.com/index.htm
• 18.
  Assignment #3