topical media & game development
professional-ria-03-GoogleMap.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBT1Od6h1-72Y7prpYCpJn9DFtoeIBRtm8wkEs7US-rldb6QtKa-S45Ezw"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(38.893813, -77.073733), 13);
}
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Creates a marker whose icon is an image and whose.
function createMarker(point, index) {
var icon = new GIcon(baseIcon);
var imageAddr = "../../images/1300N17TH.jpg";
icon.image = imageAddr;
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml(
"<img src="+imageAddr+" \"width=125\" height=\"150\" />"
);
}
);
return marker;
}
var point = map.getCenter();
map.addOverlay(createMarker(point, 0));
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 600px"></div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
