Turn kml on and off with checkbox

2,975 views
Skip to first unread message

Brooke Wikgren

unread,
Mar 24, 2011, 10:25:26 PM3/24/11
to google-map...@googlegroups.com
Hi there,
A very novice google mapper/java scripter here, pleading for help with my code.  The end goal is to be able to toggle a set of radio buttons (which are working), but I also want to have a set of checkboxes that will turn additional kml layers on and off.  This is where the problem comes.  I can get the checkboxes to turn the layers on, but not off.  The one I'm working on right now is the study area boundary, but I'm getting an object required error.  Right now, because of this error, the layer isn't even turning on.  I have tried to piece together a lot of example code I've come across to get them to work for me, but something isn't working right.  I don't know java very well, so I don't know what I'm doing wrong.
 
You can see it and the code here:  http://www.marinegis.org/GoogleMaps/Aquaculture/ 
 
Also while we're here, the bathymetry layer turns on, but it is loaded underneath the basemap, so you can't see it (but if you click on the area, the bubble pops up with the file name and it pans out to the extent) so I know it's there.  It loads into google earth just fine.  Any ideas on this one?
 
Thanks in advance for your help!

Chris Broadfoot

unread,
Mar 24, 2011, 11:02:55 PM3/24/11
to google-map...@googlegroups.com, Brooke Wikgren
You're pretty close. Your attempt with boundaryButton is the best. You're just missing a quote:
id=boundaryButton"

Inside the event handler, you can reference the button with 'this':
boundaryLayer.setMap(this.clicked ? map : null)

Hope that helps
Chris


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.



--
http://twitter.com/broady

JFrancis

unread,
Mar 25, 2011, 9:27:12 AM3/25/11
to Google Maps JavaScript API v3
Here's how I'm doing it with one KML. You could scale this for
multiple KML's with a few Javascript variables:

In your HTML, a checkbox:


<input type="checkbox" id="show_hide_KML_Layer_01"
onClick="toggleKMLLayer01();" />Show/Hide KML Layer


In your Javascript where you are creating the map:


var kmlLayer01URL = 'http://www.mySite.com/datafiles/myKMLFile01.kml';
var kmlOptions = {
preserveViewport: 1
};
kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
kmlLayer01.setMap(map);


If the KML layer is initially visible when the map is opened, the
checkbox will need to be checked. Place this code right below the
above code, within the code creating the map:


// initailly show KML Layer 01
document.getElementById('show_hide_KML_Layer_01').checked = true;


In the Javascript OUTSIDE of where you are creating your map:


// toggle the display of the KML Layer 01
function toggleKMLLayer01() {
if (!document.getElementById('show_hide_KML_Layer_01').checked)
kmlLayer01.setMap(null);
else
kmlLayer01.setMap(map);
}

HTH

-- JF

Brooke Wikgren

unread,
Mar 25, 2011, 10:05:40 AM3/25/11
to google-map...@googlegroups.com, Brooke Wikgren, Chris Broadfoot
YES!  That worked!  Thanks so much for your help.

Brooke Wikgren

unread,
Mar 25, 2011, 10:07:45 AM3/25/11
to google-map...@googlegroups.com, JFrancis
Thanks for the help JF.  What Chris suggested worked (thanks Chris), but I will probably try out your code as well.  Thanks again!
Reply all
Reply to author
Forward
0 new messages