Я остановился на чем-то вроде этого:
<!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>
<!-- TITLE -->
<title>Website Title</title>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- JAVASCRIPT -->
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Circle = null;
var Radius = $("#radius").val();
var StartPosition = new google.maps.LatLng(54.19335, -3.92695);
function DrawCircle(Map, Center, Radius) {
if (Circle != null) {
Circle.setMap(null);
}
if(Radius > 0) {
Radius *= 1609.344;
Circle = new google.maps.Circle({
center: Center,
radius: Radius,
strokeColor: "#0000FF",
strokeOpacity: 0.35,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.20,
map: Map
});
}
}
function SetPosition(Location, Viewport) {
Marker.setPosition(Location);
if(Viewport){
Map.fitBounds(Viewport);
Map.setZoom(map.getZoom() + 2);
}
else {
Map.panTo(Location);
}
Radius = $("#radius").val();
DrawCircle(Map, Location, Radius);
$("#latitude").val(Location.lat().toFixed(5));
$("#longitude").val(Location.lng().toFixed(5));
}
var MapOptions = {
zoom: 5,
center: StartPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
disableDoubleClickZoom: true,
streetViewControl: false
};
var MapView = $("#map");
var Map = new google.maps.Map(MapView.get(0), MapOptions);
var Marker = new google.maps.Marker({
position: StartPosition,
map: Map,
title: "Drag Me",
draggable: true
});
google.maps.event.addListener(Marker, "dragend", function(event) {
SetPosition(Marker.position);
});
$("#radius").keyup(function(){
google.maps.event.trigger(Marker, "dragend");
});
DrawCircle(Map, StartPosition, Radius);
SetPosition(Marker.position);
});
</script>
</head>
<body>
<form>
Latitude: <input type="text" id="latitude" /> Longitude: <input type="text" id="longitude" />
Radius: <input type="text" id="radius" value="320" />
<div id="map" style="width:600px; height:400px; background-color:#000000;">
</div>
</form>
</body>
</html>