Circle overlay in Google Map V3 API js

Question

I am trying to insert this circle on a google map, the map displays fine by including the following js file in the header;

/**
       * Called on the intiial page load.
       */
      function initialize() {
        var latLng = new google.maps.LatLng(50.272213,-5.054973);
        var options = {
          'zoom': 9,
          'center': latLng,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'),
            options);

      }

      // Register an event listener to fire when the page finishes loading.
      google.maps.event.addDomListener(window, 'load', initialize);

But when i add the following to include the circle it breaks and doesn't load;

 /**
       * Called on the intiial page load.
       */
      function initialize() {
        var latLng = new google.maps.LatLng(50.272213,-5.054973);
        var options = {
          'zoom': 9,
          'center': latLng,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'),
            options);

        // Add a Circle overlay to the map.
            var circle = new google.maps.Circle({
            map: map,
            center: new google.maps.LatLng(50.272213,-5.054973),
            fillColor: #00FF00,
            fillOpacity: 0.2,
            strokeColor: #00FF00,
            strokeOpacity: 0.4,
            strokeWeight: 2
            });
            circle.setRadius(18362.55489862987);

      }

      // Register an event listener to fire when the page finishes loading.
      google.maps.event.addDomListener(window, 'load', initialize);

If somebody could point out where im going wrong please...

duncan · Answer 1 · 2011-10-10T13:17:59.747

Don't call setRadius, just specify radius as a parameter of the circle options. Also given that you've already got a latlng object created with the same coordinates as the center of the circle, just reuse that.

 var circle = new google.maps.Circle({
            map: map,
            center: latLng,
            fillColor: #00FF00,
            fillOpacity: 0.2,
            strokeColor: #00FF00,
            strokeOpacity: 0.4,
            strokeWeight: 2,
            radius: 18362.55489862987
 });

score 0 · Accepted Answer · answered Oct 10 '11 at 13:23

0

Try changing your listener code to this:

google.maps.event.addDomListener(window, 'onload', initialize());

Here is a working example: http://jsfiddle.net/pVh3b/1/

answered Oct 10 '11 at 13:23

Bryan Weaver

4,455
1
29
39

Thanks, This clearly works however it still wont load on my wordpress website using the same code, maybe there is a js conflict? – user987668 Oct 10 '11 at 13:55
I guess it could be a conflict. I have not worked with Wordpress at all. You may want to ask a separate question with the relevant code. – Bryan Weaver Oct 11 '11 at 12:20
This is wrong answer, what this does is run the initialize immediately, and the whole line could be reduced to `initialize()` - why it works is probably the code was already in the load event. Correct way to is to do it without parenthesis, just like it was, and is in the [Hello World](https://developers.google.com/maps/documentation/javascript/tutorial). – Ciantic Apr 23 '13 at 13:57

Circle overlay in Google Map V3 API js

2 Answers2

Linked