Google Maps API

3,080 views
2,871 views

Published on

http://tinyurl.com/2flvsk

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,080
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
107
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Google Maps API

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

×