Google Maps API: Radius circle not drawing - google-maps

Question

I've followed the instruction given on the Google Maps API site, but my circle is never being drawn to my map, and I don't really understand what I am missing, could anybody point me in the right direction?
Here is my method to add the new address marker and search radius to the map (Note that the marker is added as expected):
// Add the users point to the map
function addAddress() {
// Get the users current location
var location = document.getElementById("P1_LOCATION").value; // Users postcode
var radius_size = document.getElementById("P1_RADIUS").value; // Users radius size in miles
var search_radius;
// Translate the users location onto the map
geocoder.geocode({ 'address': location}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
// Center around the users location
map.setCenter(results[0].geometry.location);
// Place a marker where the user is situated
var marker = new google.maps.Marker({
map:map,
position: results[0].geometry.location
});
// configure the radius
// Construct the radius circle
var radiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: marker.center, // I want to set the center around the users location
radius: radius_size // I want the radius to be in miles, how do I do this?
};
// add the radius circle to the map
search_radius = new google.maps.Circle(radiusOptions);
}
});
}
And I'm sure someone will ask if I have configured a base map object, this is done in my initializer method:
var geocoder;
var map;
// Create our base map object
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
How would I go about getting the radius to display around the given point? any suggestiosn would be greatly appreciated.

Answer 1

I get this error with the posted code: Uncaught InvalidValueError: setRadius: not a number
But the real issues was this: center: marker.center, should be center: marker.getPosition(), (a google.maps.Marker doesn't have a "center" property)
working code snippet:
// Add the users point to the map
function addAddress() {
// Get the users current location
var location = document.getElementById("P1_LOCATION").value; // Users postcode
var radius_size = parseFloat(document.getElementById("P1_RADIUS").value); // Users radius size in meters (unless you scale it to miles)
var search_radius;
// Translate the users location onto the map
geocoder.geocode({
'address': location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Center around the users location
map.setCenter(results[0].geometry.location);
// Place a marker where the user is situated
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// configure the radius
// Construct the radius circle
var radiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: marker.getPosition(), // I want to set the center around the users location
radius: radius_size // I want the radius to be in miles, how do I do this?
};
// add the radius circle to the map
search_radius = new google.maps.Circle(radiusOptions);
}
});
}
var geocoder;
var map;
// Create our base map object
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="P1_LOCATION" value="08646" type="text" />
<input id="P1_RADIUS" value="10000" type="text" />
<input id="geocode" value="geocode" type="button" onclick="addAddress()" />
<div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Answer 2

For anybody in future who encounters the same problem, make sure you take the extra step which is not demonstrated in the API guide, and that is to set the Map which the radius object belongs too, in my case:
search_radius.setMap(map);