I’ve been tinkering around with the Google Maps API today. I’m looking for a way to show map boundaries and then have a user search for them. Kind of a ‘find my nearest’, but with zones rather than locations. I’ve put together the following code* which should demonstrate some of the features that I might leverage. I thought I’d post it here, in case anyone is looking for something similar.
* Lifted from other examples already on the web
<!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>Google Maps JavaScript API Example: Simple Polygon</title>
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
var label, centre, point;
function initialize() {
if (!GBrowserIsCompatible()) {
alert("Your browser is not compatible, sorry");
return;
}
var map = new GMap2(document.getElementById("map_canvas"));
centre = new GLatLng(51.614259,-0.212967);
map.setCenter(centre, 16);
var polygon = new GPolygon([
new GLatLng(51.613886,-0.214105),
new GLatLng(51.614699,-0.214105),
new GLatLng(51.614619,-0.212023),
new GLatLng(51.613820,-0.211916),
new GLatLng(51.613886,-0.214105)
], "#f33f00", 5, 1, "#ff0000", 0.2);
map.addOverlay(polygon);
label = new GMarker(centre);
map.addOverlay(label);
label.openInfoWindow("My Zone");
}
function showLocation() {
label.hide();
var geocoder = new GClientGeocoder();
geocoder.getLocations(document.forms[0].address1.value, showLocationCallback);
}
function showLocationCallback(response) {
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode the address");
}
else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
calculateDistance();
}
}
function calculateDistance() {
try {
var metresdistance = centre.distanceFrom(point);
var milesdistance = Math.round(metresdistance * 0.000621371192237334);
label.openInfoWindow("<p>My Zone</p> <p>Distance: " milesdistance " miles.</p>");
}
catch (error) {
alert(error);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<form action="#" onsubmit="showLocation(); return false;" ID="Form1">
<p>
<input type="text" name="address1" value="Pratt Mews, NW1"
class="address_input" size="40" ID="Text1" />
<input type="submit" name="find" value="Find Distance" ID="Submit1" />
</p>
</form>
</body>
</html>
