google maps api
DESCRIPTION
http://tinyurl.com/2flvskTRANSCRIPT
Google Maps API
Dr. Harry Chen
CMSC 491S/691S
March 26, 2008
Agenda
“Fire hose” course on Google Maps API HelloWorld example Basic UI components Loading data
Assignment #3
HelloWorld
What happened here?
“View Page Source”
Google Maps API Key (required)
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
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
Key Map Controls
Control: Zoom
Control: Map Type
Control: Overview
http://code.google.com/apis/maps/documentation/controls.html#Controls_overview
Control: Pan
Control Code Example
GMarker
Markers : Use GMarker to create markers
Customize GMarker
Use your own marker icon
Use a smaller marker icon
http://code.google.com/apis/maps/documentation/overlays.html#Markers
OpenInfoWindowHtml
This func creates GMarker
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?
On loading data
Option 1: Define data in the <head/> of your map page
Option 2: Read from a GeoRSS fileOption 3: Read from a KML fileOption 4: Read from a custom XML file
Read from a GeoRSS/KML file
What’s GeoRSS? What’s KML?
So easy!
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?
Read from a custom XML
GDownloadUrl: Built-in for downloading any data from a remote URL
GXml: XML parser!
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
Assignment #3