Googlemaps circle not appearing - google-maps-api-3

Question

I'm having trouble getting a circle to appear on my map, but I'm not getting any errors. Can anyone tell me what I'm doing wrong, please?
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.0342375, -77.3066405),
zoom: 8,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN, //style below will be 'shift worker' from snazzy maps
styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]
};
var mymap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
var map = document.getElementById("map-canvas");
$(document).ready(function() {
google.maps.visualRefresh = true;
google.maps.event.addDomListener(window, 'load', initialize);
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(41.0342375, -77.3066405),
radius: 84482
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
});

Answer 1

Variable scope in Javascript bit you.
The mymap variable is what you need to use for the CircleOptions map property. However it goes out of scope with your initialize function. Your map variable in the anonymous function is just a DIV DOM element, not a google.maps.Map instance.
Simplified working example # http://jsfiddle.net/stevejansen/H5bRg/
There is no reason to combine jQuery's document#ready event handler with google.maps.event.addDomListener(window, 'load', initialize);. They both handle the same DOM event. Just stick with one or the other. It's confusing to use both.