Custom Overlay

The overlay is added to the map with this JavaScript code (added to the JavaScript Initialization Code):

const bounds = new google.maps.LatLngBounds( new google.maps.LatLng(-31.960837, 115.852273), new google.maps.LatLng(-31.956112, 115.860740) ); // Image source: const img = ` <img src="" style="width:100%; height:100%; position:absolute;"> `; document.overlay = this.addOverlay(img, { bounds: bounds });

The object returned by addOverlay is a MapOverlay which provides functions like show(), hide(), and toggle(). For example, the on click dynamic action on the Toggle button executes the following: