CODEWITHSUNDEEP
javascriptgoogle-maps
thank_you
thank_you

Reputation: 11107

google maps get radius

I'm having a stupid hard time with this google maps javascript code. I want to get the return of the radius of a circle that is produced on google maps. Google API offers the code but I have no idea where to put it. I've tried everywhere. Here is the code below. What did I do wrong?

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<style type="text/css"> 
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
 #map_canvas { height: 50% }
</style> 

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&libraries=drawing">
</script>

<script>
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(33.65, -84.42),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [

          google.maps.drawing.OverlayType.CIRCLE
        ]
      },

      circleOptions: {
        fillColor: '#01939A',
        fillOpacity: .4,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    });




    drawingManager.setMap(map);





     }

  google.maps.event.addDomListener(window, 'load', 

  initialize).addListener(drawingManager, 'circlecomplete', function(circle) 

  {

  var radius = circle.getRadius();

  });

</script>

</head>

<body>

<script type="text/javascript" >

        alert(radius);

</script>


<div id="map_canvas"></div>

</body>

</html>

Upvotes: 0

Views: 6844

Answers (1)

Tim
Tim

Reputation: 5822

You seem to have a few flow problems here. Trying to use the drawingManager variable, which is bound by the initialize function.

Here: http://jsfiddle.net/RN3QL/ - I've moved the binding of the circle complete function to within the initialize function, and stitched up a few smaller flow issues.

Upvotes: 2

Related Questions