<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Map 3 - Google Maps Geocoding</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
var map1 = null;
var map2 = null;
var map3 = null;
var LAtrafficInfo = null;
var NYtrafficInfo = null;
var CItrafficInfo = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map1 = new GMap2(document.getElementById("map_canvas1"));
map1.setCenter(new GLatLng(34.052187, -118.243425), 11);
map1.setMapType(G_HYBRID_MAP);
map1.addControl(new GLargeMapControl());
map1.addControl(new GMapTypeControl());
var trafficOptions1 = {incidents:true};
LAtrafficInfo = new GTrafficOverlay(trafficOptions1);
map1.addOverlay(LAtrafficInfo);
map2 = new GMap2(document.getElementById("map_canvas2"));
map2.setCenter(new GLatLng(40.756054, -73.986951), 11);
map2.setMapType(G_HYBRID_MAP);
map2.addControl(new GLargeMapControl());
map2.addControl(new GMapTypeControl());
var trafficOptions2 = {incidents:true};
NYtrafficInfo = new GTrafficOverlay(trafficOptions2);
map2.addOverlay(NYtrafficInfo);
map3 = new GMap2(document.getElementById("map_canvas3"));
map3.setCenter(new GLatLng(41.879535, -87.624333), 11);
map3.setMapType(G_HYBRID_MAP);
map3.addControl(new GLargeMapControl());
map3.addControl(new GMapTypeControl());
var trafficOptions3 = {incidents:true};
CItrafficInfo = new GTrafficOverlay(trafficOptions3);
map3.addOverlay(CItrafficInfo);
geocoder = new GClientGeocoder();
}
}
function showAddress(address,flag) {
if (flag == 1) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map1.setCenter(point, 16);
var marker = new GMarker(point, {draggable: true});
map1.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
if (flag == 2) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map2.setCenter(point, 16);
var marker = new GMarker(point, {draggable: true});
map2.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
if (flag == 3) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map3.setCenter(point, 16);
var marker = new GMarker(point, {draggable: true});
map3.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
}
</script>
</head>
<body Xonload="initialize()" Xonunload="GUnload()">
<form action="#" Xonsubmit="showAddress(this.address1.value,1); return false">
<p>
<input type="text" style="width:350px" name="address1" value="Los Angeles" />
<input type="submit" value="Go There!" />
</p>
<div id="map_canvas1" style="width: 500px; height: 350px"></div>
<br>
</form>
<form action="#" Xonsubmit="showAddress(this.address2.value,2); return false">
<p>
<input type="text" style="width:350px" name="address2" value="New York" />
<input type="submit" value="Go There!" />
</p>
<div id="map_canvas2" style="width: 500px; height: 350px"></div>
<br>
</form>
<form action="#" Xonsubmit="showAddress(this.address3.value,3); return false">
<p>
<input type="text" style="width:350px" name="address3" value="Chicago" />
<input type="submit" value="Go There!" />
</p>
<div id="map_canvas3" style="width: 500px; height: 350px"></div>
</form>
</body>
</html>