On my web page I have already a Google Maps API with a search bar (see code below) and at first the user pinpoints an address. Then the User is be able to search businesses around this point with a search bar. Before search is complete I'd like to draw a circle around this address for instance with a distance of 15 km. The search should show only results within this circle. It would be nice if you also could move the circle... How can I do this with Google Maps?
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
/* Initialize the Google Maps */
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50.786916, 6.101360), 16);
var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = false;
map.setUI(customUI);
var options = {
onSearchCompleteCallback:function(searcher){
var resultcontent = '';
if (searcher.results && searcher.results.length > 0) {
$("#ResultGrid").clearGridData(true);
for (var i = 0; i < searcher.results.length; i++) {
var result = searcher.results[i];
// Split address-lines to get Zipcode
TempString = result.addressLines[1];
var ZipCode = TempString.split(/\b[^0-9]/);
// construct the data array
var InputData = {Firma:result.titleNoFormatting, Adresse:result.addressLines[0], Postleitzahl:ZipCode[0], Ort:result.city, Telefonnummer:result.phoneNumbers[0].number};
// Apply data to grid
jQuery("#ResultGrid").addRowData(i, InputData);
$("#Result").show("slow");
}
} else {
$("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>Kein Suchergebnis!</p>");
$("#Dialog").dialog("option", "title", "Hinweis:");
$("#Dialog").dialog("open");
$("#Dialog").html("Keine Ergebnisse gefunden!");
$("#Dialog").dialog("option", "title", "Hinweis:");
$("#Dialog").dialog("open");
}
}
};
localSearch = new google.maps.LocalSearch(options);
map.addControl(localSearch);
map.removeControl(GScaleControl);
geocoder = new GClientGeocoder();
$("#map").hide("fast");
$("#Result").hide("fast");
}
}
function showAddress(address, CompleteAdd) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
$("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>"+address+" nicht gefunden</p>");
$("#Dialog").dialog("option", "title", "Hinweis:");
$("#Dialog").dialog("open");
} else {
map.setCenter(point, 16);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(CompleteAdd);
}
}
);
}
$("#map").show("fast");
}
</script>
<body onload="initialize()" onunload="GUnload()">
<div class="main" align="center">
<div id="Dialog">
<p><span class="ui-icon ui-icon-info" style="float:left; "></span>Dialog text</p>
</div>
<br/>
<div id="map" style="width: 850px; height:450px; padding:10px; font-size: medium; color:#853805; background-color:#FFE8CF;"></div>
</div>
</body>