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

“ 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

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

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?

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 file Option 3: Read from a KML file Option 4: Read from a custom XML file

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

Read from a GeoRSS/KML file What’s GeoRSS? What’s KML? So easy!

What’s GeoRSS? What’s KML?

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?

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

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