mehran mehran - 19 days ago 5
Javascript Question

Some event not triggering

I would like make simple app that user can draw a circle and resize and drag it
and at the end receive center position and distance.
I made it and it works fine but when the circle is dragged or resized, events not trigger.

This is my code, note that

overlaycomplete
and
circlecomplete
work.

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map-canvas"></div>


<script type="text/javascript">

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
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.CIRCLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#000000',
fillOpacity: 0.6,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
}
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var coordinates = (e);
drawingManager.setDrawingMode(null);
});

google.maps.event.addListener(drawingManager, 'circlecomplete', function (e) {
var coordinates = (e);
console.log(coordinates);
console.log('radius', coordinates.getRadius());
console.log(coordinates.getCenter().lat())
console.log(coordinates.getCenter().lng())
});


google.maps.event.addListener(drawingManager, 'center_changed', function (e) {
var coordinates = (e);
console.log(coordinates);
console.log('radius', coordinates.getRadius());
console.log(coordinates.getCenter().lat())
console.log(coordinates.getCenter().lng())
});


google.maps.event.addListener(drawingManager, 'distance_changed', function (e) {
var coordinates = (e);
console.log(coordinates);
console.log('radius', coordinates.getRadius());
console.log(coordinates.getCenter().lat())
console.log(coordinates.getCenter().lng())
});

drawingManager.setMap(map);

}

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

</script>

Answer

It seems center_changed and distance_changed are not events dispatched by the DrawingManager Class

There is a center_changed event dispatched by the Map class, but this event is triggered when the center of the map is changed, not the center of a circle overlay.

Edit: (untested)

You have to use the Circle overlay instance events such radius_changed, drag or dragend

google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
    console.log('radius at creation', circle.getRadius());
    console.log('lat at creation', circle.getCenter().lat())
    console.log('lon at creation', circle.getCenter().lng())
    google.maps.event.addListener(circle, 'radius_changed', function () {
        console.log('radius after change', circle.getRadius());
        console.log('lat after radius change', circle.getCenter().lat())
        console.log('lon after radius change', circle.getCenter().lng())
     });
    google.maps.event.addListener(circle, 'dragend', function () {
        console.log('radius at dragend', circle.getRadius());
        console.log('lat at dragend', circle.getCenter().lat())
        console.log('lon at dragend', circle.getCenter().lng())
     });
});