JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" style="height:300px;"></div>
<div id="toggleTiles"></div>
JavaScript
var overlays=[
{
img:'http://www.gravatar.com/avatar/3c9ccfaa084eb12cc0b72e13962003e7?s=256&d=identicon&r=PG',
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608))
},
{
img:'http://www.gravatar.com/avatar/a14f2a08ae523d5a674b719eae03c428?s=256&d=identicon&r=PG',
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(62.281819, -150.787132),
new google.maps.LatLng(62.400471, -150.505608))
},
{
img:'https://developer.mozilla.org/skins/mdn/Transitional/img/mdn-logo.png',
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(62.281819, -149.787132),
new google.maps.LatLng(62.400471, -149.505608))
}
];
Tiles.prototype = new google.maps.OverlayView();
function ginit() {
var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
var myOptions = {
zoom: 10,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var bounds=new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(var i=0;i<overlays.length;++i)
{
overlays[i].overlay=new Tiles(overlays[i].bounds,overlays[i].img,map)
bounds.union(overlays[i].bounds);
$('<div>').append(
$('<input checked="checked" type="checkbox" value="'+i+'"/>')
.click(function(){
//alert(map)
overlays[this.value].overlay.setMap((this.checked)?map:null)
}))
.append('<strong>Tile#'+(i+1)+'</strong>')
.appendTo('#toggleTiles');
}
map.fitBounds(bounds)
}
function Tiles(bounds, image, map)
{
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
...