Unable to get bounds of drawing rectangle on map - google-maps-api-3

Question

I am working on this demo. Why am I getting this error:
overlay.getBounds is not a function
while trying to get bounds of drawn rectangle on the map?
var rectangle;
var map;
var drawingManager;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
drawingManager = new google.maps.drawing.DrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log( start);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function drawRec() {
//Setting options for the Drawing Tool. In our case, enabling Polygon shape.
if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
rectangle.overlay.setMap(null);
}
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
strokeColor: '#6c6c6c',
strokeWeight: 3.5,
fillColor: '#926239',
fillOpacity: 0.6,
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

Answer 1

You get the error: "overlay.getBounds is not a function", because overlay.getBounds() is not a function. overlay is not a google.maps.Rectangle, but it has an overlay property which is.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log(start.toUrlValue(6));
});
updated fiddle
code snippet:
var rectangle;
var map;
var drawingManager;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
drawingManager = new google.maps.drawing.DrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log(bounds.toUrlValue(6));
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function drawRec() {
//Setting options for the Drawing Tool. In our case, enabling Polygon shape.
if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
rectangle.overlay.setMap(null);
}
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
strokeColor: '#6c6c6c',
strokeWeight: 3.5,
fillColor: '#926239',
fillOpacity: 0.6,
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

Answer 2

Check the documentation:
https://developers.google.com/maps/documentation/javascript/drawinglayer#drawing_events
The overlay event in your event listener has two properties:
overlay
type
So you'd need to change your code to something like this:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlayEvent) {
rectangle = overlayEvent.overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = rectangle.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
});