CODEWITHSUNDEEP
google-maps-api-3
user2915001
user2915001

Reputation: 41

Cannot draw circle by clicking on the map

Can anybody help me on finding what is wrong with my code here =>

google.maps.event.addListener(bigmap_rad, 'click', function(event) {
   if(document.getElementById('circle_radius').value==''){
       alert('Put a radius to draw the circle');
   }
   var lat=event.latLng.lat();          
   var lon=event.latLng.lng();
   var rad=document.getElementById('circle_radius').value;
   alert("radius"+rad+" "+lon+"  "+lat);
   var circleOptions={
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       map: bigmap_rad,
       center: new google.maps.LatLng(lat,lon),
       radius: rad          
    };
    Circle = new google.maps.Circle(circleOptions);             
});

I need to click on the map and then a circle will appear with that provided radius. I'm getting those lat , long and rad alert correctly and the map appeared but that circle with that provided radius is not drawn on that map. Please help me. Thanks in advance.

Upvotes: 0

Views: 136

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

The radius is expected to be a Number, but values of form-fields are always strings.

You must convert the type of rad:

radius: parseInt(rad,10)

Upvotes: 1

Related Questions