How to draw rectangle by outside custom button event handler - google-maps

Question

I am trying to draw a rectangle by using a Custom Dom Element like
<button id="rect">Draw</button>
and here is the script which I am using
var drawingStyle = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true,
draggable: true,
};
google.maps.event.addListener(rect, 'click', function() {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: drawingStyle,
map: map
});
drawingManager.setMap(map);
});
but clicking on the #rect is not causing any event! not even any error on the console. What am I doing wrong?

Answer 1

#rect is a DOM object. To listen for events on it with the Google Maps Javascript API v3 event listeners, use the addDomListener method.
<button id="rect">Draw</button>
google.maps.event.addDomListener(document.getElementById('rect'), 'click', function() {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: drawingStyle,
map: map
});
drawingManager.setMap(map);
});
working code snippet:
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 45,
lng: -85
},
zoom: 4
});
}
google.maps.event.addDomListener(document.getElementById('rect'), 'click', function() {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
// rectangleOptions: drawingStyle,
map: map
});
drawingManager.setMap(map);
});
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="rect">Draw</button>
<div id="map-canvas"></div>