What am I missing here? I have been staring at this thing for almost 3 days now, and cannot figure out what I am doing wrong. I have tried countless examples from various parts of the web, and the documentation isnt making much sense - but then again, letters are starting to run together. Any pointers would be helpful!
The below is what I amy trying to get to work. I have two groundoverlay images, with two checkboxes. What I would like to have happen is if the box is checked, the overlay shows. If the box is unchecked, the overlay goes away. Simple right?
<body onload="initialize()">
<div id="controls">
<input name="ckc1" onclick="showcov(rmap1,ckc1);" type="checkbox" checked="true">White Tanks</input>
<input name="ckc2" onclick="showcov(rmap2,ckc2);" type="checkbox" checked="true">Scottsdale</input>
</div>
<div id="map_canvas"></div>
<script language="javascript" type="text/javascript">
var map;
var rmap1,mk1,ckc1;
var rmap2,mk2,ckc2;
function initialize() {
var coord = new google.maps.LatLng( 33.5783309936523,-112.573112487793);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {lat: 33.5783309936523, lng:-112.573112487793},
zoom: 8
});
//White Tanks
var boundaries1 = new google.maps.LatLngBounds(
new google.maps.LatLng( 32.22935,-114.1923),
new google.maps.LatLng( 34.92731,-110.9539));
rmap1 =new google.maps.GroundOverlay("RM77B714BB9248_1.png", boundaries1);
rmap1.setMap(map);
mk1 =new google.maps.Marker({position:new google.maps.LatLng( 33.57832983,-112.57310897),map:map,title:'462.550 Mhz at 50 Watts',draggable:false,zIndex:1});
//Scottsdale
var boundaries2 = new google.maps.LatLngBounds(
new google.maps.LatLng( 32.36672,-113.4623),
new google.maps.LatLng( 35.06469,-110.2188));
rmap2 =new google.maps.GroundOverlay("RM77B714BB9248_4.png", boundaries2);
rmap2.setMap(map);
mk2 =new google.maps.Marker({position:new google.maps.LatLng( 33.715703,-111.840549),map:map,title:'462.600 Mhz at 20 Watts',draggable:false,zIndex:1});
}
//Checkbox Function
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script>
</body>
The one below works just fine - but it's only one layer. I'm not sure what I am missing, but I'm sure is something simple as I have little experience with JS and mapping in this fashion.
<script type="text/javascript">
var map;
var rmap1,mk1;
function initialize() {
var coord = new google.maps.LatLng( 33.7157020568848,-111.840545654297);
var myOptions = {zoom: 7,center: coord, mapTypeId:
google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 32.36672,-113.4623), new google.maps.LatLng( 35.06469,-110.2188));
rmap1 =new google.maps.GroundOverlay("RM77B714BB9248_4.png", boundaries1);
rmap1.setMap(map);
mk1 =new google.maps.Marker({position:new google.maps.LatLng( 33.715703,-111.840549),map:map,draggable:false,zIndex:1});
rmap1.setMap(map);
}
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script></head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:80%"></div>
<div style="width:100%;height:10%">
<table width="100%"><tr><th colspan="2">Scottsdale 450 MHz**</th></tr><tr> <td bgcolor="#E0E0E0" colspan="2"><form name="form2">
<input type="checkbox" name="ckc1" checked="true" onclick="showcov(rmap1,ckc1);">Scottsdale 450 MHz**</input>
<input type="checkbox" name="ckm1" checked="true" onclick="showcov(mk1,ckm1);">Scottsdale</input>
</form></td></tr></table></div></body>
Aucun commentaire:
Enregistrer un commentaire