Question

I want to draw multiple circles on a map, using the Google Maps API anj jQuery.
The following code works as long as the line with drawMapCircle() is commented out (The markers are positioned correctly).

What’s wrong with my code?

$.getJSON(
    "ajax/show.php",
    function(data)
    {
        $.each(data.points, function(i, point)
        {
            map.addOverlay(new GMarker(new GLatLng(point.lat, point.lng)));
            drawMapCircle(point.lat, point.lng, 0.01, '#0066ff', 2, 0.8, '#0cf', 0.1);
        });
    }
);

function drawMapCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity)
{
    var d2r = Math.PI / 180;
    var r2d = 180 / Math.PI;
    var Clat = radius * 0.014483;  // statute miles into degrees latitude conversion
    var Clng = Clat/Math.cos(lat * d2r); 
    var Cpoints = []; 

    for (var i = 0; i < 33; i++)
    { 
        var theta = Math.PI * (i / 16);
        Cy = lat + (Clat * Math.sin(theta));
        Cx = lng + (Clng * Math.cos(theta));
        var P = new GLatLng(Cy, Cx);
        Cpoints.push(P);
    }

    var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
    map.addOverlay(polygon);
}

Javascript throws the following error:

Error: a is undefined
Source: http://maps.gstatic.com/intl/de_ALL/mapfiles/208a/maps2.api/main.js
Line: 317
function Nh(){x(pd).sV();eval(arguments[1])} 

Answer 1

You will need to convert the point values, returned from the ajax call, to float numbers as the google api seems to choke when it receives strings..

use parseFloat like this

drawMapCircle(parseFloat(point.lat), parseFloat(point.lng), 0.01, '#0066ff', 2, 0.8, '#0cf', 0.1);

updated answer
the actual problem lies in the lines

Cy = lat + (Clat * Math.sin(theta));
Cx = lng + (Clng * Math.cos(theta));

addition between string and number yields text..and since both are float numbers, it ends with two . decimal separators, and thus NaN…