Google Maps API
- 1. Google Maps API Dr. Harry Chen CMSC 491S/691S March 26, 2008
- 2. Agenda “ Fire hose” course on Google Maps API HelloWorld example Basic UI components Loading data Assignment #3
- 3. HelloWorld What happened here?
- 4. “View Page Source” Google Maps API Key (required)
- 5. What’s involved Define a <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() function Checks 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 Controls Control: Zoom Control: Map Type Control: Overview http://code.google.com/apis/maps/documentation/controls.html#Controls_overview Control: Pan
- 9. GMarker Markers : Use GMarker to create markers
- 10. Customize GMarker Use your own marker icon Use a smaller marker icon http://code.google.com/apis/maps/documentation/overlays.html#Markers
- 11. OpenInfoWindowHtml This func creates GMarker
- 12. On Creating GMarker We 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 data Option 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 a GeoRSS/KML file What’s GeoRSS? What’s KML? So easy!
- 15. Read from a custom 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 a custom 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