<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0:
http://www.apache.org/licenses/LICENSE-2.0 -->
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-micro
soft-com:v
ml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Example: Simple Geocoding</title>
<script src="
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
type="text/javascript"></scr
ipt>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementB
yId("map_c
anvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 1);
map.setUIToDefault();
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker,
"dragend", function() {
marker.openInfoWindowHtml(
marker.get
LatLng().t
oUrlValue(
6));
});
GEvent.addListener(marker,
"click", function() {
marker.openInfoWindowHtml(
marker.get
LatLng().t
oUrlValue(
6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this
.address.v
alue); return false">
<p>
Enter an address, and then drag the marker to tweak the location.
<br/>
The latitude/longitude will appear in the infowindow after each geocode/drag.
</p>
<p>
<input type="text" style="width:350px" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
<input type="submit" value="Go!" />
</p>
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</form>
</body>
</html>
