Skip to Main Content

map

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: https://www0.landgate.wa.gov.au/maps-and-imagery/imagery/now-and-then-with-landgate-aerial-imagery const img = ` <img src="https://raw.githubusercontent.com/jeffreykemp/jk64-plugin-reportmap/Release-1-5/demo_src/images/EQ-1948.jpg" 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:

document.overlay.toggle();