Toggle Multiple Image Overlays in Google Maps v3 using Checkboxes - google-maps-api-3

Question

Please give me a piece of advice.
I'm trying to create a map with multiple image overlays. I'd like to show/hide each overlays by checking the checkbox. I used GeoJason's code as a reference, but for some reason, it doesn't work properly for me: whether checked or unchecked, no layer appears. Please tell me what's wrong with my code.
This is script part.
<script>
var server = 'https://gbank.gsj.jp/seamless/tilemap/';
var geolMapType = 'basic';
var layer = 'glfn';
var opacity = 0.7;
var map;
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(34.59, 135.67),
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 5,
maxZoom: 13
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
overlayMaps = [
{ //sedTer
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //sedMar
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=_____AAAAAAAAAAAAAAAAAAAAAAwBAIEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //accSed
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAA______4AAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //accMaf
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAH-AAAAAAAAAAAAAAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //volTep
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //volDeb
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //volInt
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAeAAAAAAAAAAAAAAAehwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //pluFel
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAP_-AAAAAAgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //pluMaf
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAABAAAAAAAAAD_-AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //pluMig
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
},
tileSize: new google.maps.Size(256, 256),
isPng: true
}, { //all
getTileUrl: function (coord, z) {
return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 0.2
}
];
$('.layer').click(function(){
var layerID = parseInt($(this).attr('id'));
if ($(this).attr('checked')){
var overlayMap = new google.maps.ImageMapType(overlayMaps[layerID]);
map.overlayMapTypes.setAt(layerID, overlayMap);
}
else {
if (map.overlayMapTypes.getLength() > 0){
map.overlayMapTypes.setAt(layerID, null);
}
}
});
for (i = 0; i < overlayMaps.length; i++){
map.overlayMapTypes.push(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And this is HTML code.
<input type="checkbox" id="00" class="layer" name="sedTer" /><label for="00">Sedimentary Rocks, Terrace</label><br />
<input type="checkbox" id="01" class="layer" name="sedMar" /><label for="01">Sedimentary Rocks, Non-marine&Marine</label><br />
<input type="checkbox" id="02" class="layer" name="accSed" /><label for="02">Accretionary Complexes, Mainly sedimentary rocks</label><br />
<input type="checkbox" id="03" class="layer" name="accMaf" /><label for="03">Accretionary Complexes, Mafic</label><br />
<input type="checkbox" id="04" class="layer" name="volTep" /><label for="04">Volcanic Rocks, Tephra</label><br />
<input type="checkbox" id="05" class="layer" name="volDeb" /><label for="05">Volcanic Rocks, Debris</label><br />
<input type="checkbox" id="06" class="layer" name="volInt" /><label for="06">Volcanic Rocks, Intrusive</label><br />
<input type="checkbox" id="07" class="layer" name="pluFel" /><label for="07">Plutonic Rocks, Felsic</label><br />
<input type="checkbox" id="08" class="layer" name="pluMaf" /><label for="08">Plutonic Rocks, Mafic</label><br />
<input type="checkbox" id="09" class="layer" name="pluMig" /><label for="09">Plutonic Rocks, Migmatitic</label><br />
<input type="checkbox" id="10" class="layer" name="all" /><label for="10">All</label><br />
Please, no flames about my bad English. Thank you for your time.

Answer 1

The issue is this:
if ($(this).attr('checked'))
when you click a checkbox, the checked-attribute of a checkbox will not change.
But the checked-property will, use this instead:
if ($(this).prop('checked'))