<!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=[your-google-api_key]” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
var geocoder;
var map;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
//map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
geocoder = new GClientGeocoder() ;
}
}
function doFind(address) {
document.getElementById('addr').value=address;
map.clearOverlays() ;
geocoder.getLocations(address, function (result) {
if (result.Status.code == G_GEO_SUCCESS) {
document.getElementById("message").innerHTML = "Found " + result.Placemark.length +" results";
for (var i=0; i<result.Placemark.length; i++) {
var p = result.Placemark[i].Point.coordinates;
var marker = new GMarker(new GLatLng(p[1],p[0]),{title:address });
if (result.Placemark.length>1) {
document.getElementById(“message”).innerHTML += “<br>”+(i+1)+”: <a href=\”javascript:doFind(‘”+result.Placemark[i].address+”‘)\”>”+ result.Placemark[i].address+”</a>” ;
document.getElementById(“message”).style.display=’block’;
}
else
document.getElementById(“message”).style.display=’none’;
map.addOverlay(marker);
}
var p = result.Placemark[0].Point.coordinates;
map.setCenter(new GLatLng(p[1],p[0]),4);
} else {
document.getElementById(“message”).innerHTML = ‘Could not find “‘ + address + ‘” ‘;
}
}) ;
}
function findLocation(e) {
var keyCode = e.keyCode;
if (keyCode!=13 && keyCode!=32) return
var address = document.getElementById(‘addr’).value;
doFind(address);
}
//]]>
</script>
</head>
<body onload=”load()” onunload=”GUnload()”>
<div id=”message” style=”background:#fff;width:250px;height:300px;overflow:auto;border:1px solid #000;position:absolute;top:24px;left:10px;display:none;z-index:100″></div>
<div><input type=”text” id=”addr” onmouseup=”findLocation(event)” onkeyup=”findLocation(event)”></div>
<div id=”map” style=”width:500px; height:300px;”></div>
</body>
</html>
