Question

I have create a site embedded Google mapusing api V3 that shows our 4 offices, you can then type your postcode and check the distance between you and an office, this works!

I want to now create a radial search, I’ve found how to do it online, which is great and am on the final hurdle and this is where I need your help if possible.

I have the following:

        geocoder = new google.maps.Geocoder(); // creating a new geocode object

    // getting the two address values
    address1 = document.getElementById("addresses1").value;
    distance1 = document.getElementById("distance").value;

    // finding out the coordinates
    if (geocoder) 
    {
        geocoder.geocode( { 'address': address1}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of first address (latitude + longitude)
                location1 = results[0].geometry.location;

                // Location Marker
                var marker = new google.maps.Marker({
                  map: map,
                  position: location1,
                  title: 'Random text'
                });
                // Add circle overlay and bind to marker
                var circle = new google.maps.Circle({
                  map: map,
                  radius: distance1,
                  strokeWeight: 0,
                  fillColor: '#AA0000'
                });
                circle.bindTo('center', marker, 'position');


            } else 
            {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }

I have managed to get everything working except for $distance1. What should happen is, the user selects the distance from a form: say 10 miles (set in meters for Google Maps) when they hit submit, a circle is drawn with a radius of 10 miles.

As the code stands, the point is drawn but, the circle does not appear.

If I replace distance1 = document.getElementById("distance").value; with distance1 = 16999; for example, then a circle appears and it works perfectly.

To me this must mean that there is something wrong with the content of distance1 when it is being pulled from the form. I have done a NaN test just to be sure and it reports that the content is a number.

My question is (in a very long winded way – sorry about that) do you have any idea how to get distance1 to have a value from the form.

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: distance1,
strokeWeight: 0,
fillColor: '#AA0000'
});

The part in question is radius: distance1

Answer 1

Might help to make sure it is a number, not a string.

distance1 = parseFloat(document.getElementById("distance").value);

(parseInt would probably work fine as well, since it is in meters and fractional meters won’t make much difference)