CODEWITHSUNDEEP
google-maps-api-3geometry
LauraNMS
LauraNMS

Reputation: 2853

Googlemaps circle not appearing

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);

});

Upvotes: 1

Views: 814

Answers (1)

Steve Jansen
Steve Jansen

Reputation: 9494

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.

Upvotes: 2

Related Questions