Unable to view map circle overlay results in Google JS API V3

Question

I have been testing this in the Google Code Playground before I try to implement anything further.

This simply places a map marker on the map and produces a circle overlay with it by a radius given in miles. However, I am still unable to get this to work.

It seems to break on the circle overlay creation. I have been searching for a solution but everything I have tried so far either breaks (the map does not display) or gives me no result (no circle overlay).

Note: I came across a similar question [question:] Circle overlay in Google Map V3 API js . I tried this solution but it did not work.

function initialize()
{
  if (GBrowserIsCompatible())
  {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(30.6957, -88.1813), 13);


    var latlng = new GLatLng(30.6957, -88.1813);
    map.addOverlay(new GMarker(latlng));

    var draw_circle = null;

    function Draw_Circle(Miles)
    { 
      Miles *= 1600;

      if (draw_circle != null)
      {
        draw_circle.setMap(null);
      }

      draw_circle = new google.maps.Circle({
        center: latlng,
        radius: Miles,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map
      });  
    }

    Draw_Circle(15);
  }
 }

Thank you again in advance.

EDIT: Now that I have been informed that I was mixing API Versions. I came up with the following:

var latLng;

function initialize() {
  var map;
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(30.6957, -88.1813),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  latLng = new google.maps.LatLng(30.6957, -88.1813);
  var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

  var draw_circle = null;

  function Draw_Circle(Miles)     
  {        
    Miles *= 1600;        
    if (draw_circle != null)       
    {         
      draw_circle.setMap(null);       
    }       

    draw_circle = new google.maps.Circle({         
      center: latlng,         
      radius: Miles,         
      strokeColor: "#FF0000",         
      strokeOpacity: 0.8,         
      strokeWeight: 2,         
      fillColor: "#FF0000",         
      fillOpacity: 0.35,         
      map: map       
     });

  }      

  Draw_Circle(15);
}

I am ALMOST there... Now, I don't have any error messages from the debugger to signify what is wrong with my circle overlay.

Answer 1

Issue 1: You are using Google Maps API V2 and Google Maps API V3 together.

Issue 2: In the following code

.....
draw_circle = new google.maps.Circle({         
  center: latlng,   
  .....

The Error thrown is ReferenceError: latlng is not defined.

If you replace latlng with latLng, the script will work as expected.