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