Make sure the function comes after you declare the "layer" variable - it
should work. If it still doesn't, I'll try to do up a jsfiddle example and
see what's going on.
On Thursday, August 2, 2012 12:03:52 PM UTC-4, es wrote:
>
> So, I deleted the "google.maps.event.addDomListener(window, 'load',
>> initialize);" at the very bottom of the script and I moved the ToggleLayer
>> function to here (see below), but the toggle still doesn't work. Did I do
>> this correctly?
>>
>>
> <script type="text/javascript">
> google.load('visualization', '1', {packages: ['corechart']});
> google.load('maps', '3.9', {other_params: "sensor=false"});
> google.setOnLoadCallback(initialize);
> var map;
> function initialize() {
>
> *function ToggleLayer() {
> var chkLayer = document.getElementById("show_hide_Layer");
> if (chkLayer.checked === true) {
> //Turn layer on
> layer.setMap(map);
> }
> else {
> //Turn layer off
> layer.setMap(null);
> }
> }
>
> *
> On Wed, Aug 1, 2012 at 1:39 PM, asgallant <[email protected]>wrote:
>
>> Two things:
>>
>> 1) you shouldn't call the initialize function from both
>> google.setOnLoadCallback and google.maps.event.addDomListener - the
>> setOnLoadCallback should be sufficient (and the other one is probably
>> throwing an error - if it isn't, then initialize is being called twice,
>> which you probably don't want).
>>
>> 2) the source of your problem is the scope of the "layer" variable. It
>> is declared locally inside the initialize function, and you are trying to
>> access it from outside the initialize function. You either need to declare
>> "layer" in a global scope or move the ToggleLayer function inside the
>> initialize function.
>>
>>
>> On Wednesday, August 1, 2012 4:27:30 PM UTC-4, es wrote:
>>>
>>> I'm wondering if it's interfering in some way, with my pie and scatter
>>> (which also reference the "layer" variable). I wanted to spare you a
>>> lengthy code posting, but maybe it would be helpful to see the rest of the
>>> code??
>>>
>>> <!-- Below is the code for the google map: -->
>>>
>>> <script type="text/javascript">
>>> google.load('visualization', '1', {packages: ['corechart']});
>>> google.load('maps', '3.9', {other_params: "sensor=false"});
>>> google.setOnLoadCallback(**initialize);
>>> var map;
>>> function initialize() {
>>> var myOptions = {
>>> center: new google.maps.LatLng(38.099983, -80.683594),
>>> zoom: 7,
>>> mapTypeControl: true,
>>> mapTypeControlOptions: {
>>> style: google.maps.**MapTypeControlStyle.**HORIZONTAL_BAR,
>>> position: google.maps.ControlPosition.**TOP_RIGHT
>>> },
>>> zoomControlOptions: {
>>> style: google.maps.ZoomControlStyle.**LARGE
>>> },
>>> streetViewControl: true,
>>> streetViewControlOptions: {
>>> position: google.maps.ControlPosition.**LEFT_TOP
>>> },
>>> mapTypeId: google.maps.MapTypeId.TERRAIN
>>> };
>>>
>>> map = new google.maps.Map(document.**getElementById('map_canvas'),
>>> myOptions);
>>> var layer = new google.maps.FusionTablesLayer(**);
>>> updateLayerQuery(layer);
>>> layer.setMap(map);
>>>
>>> var kmlLayerNationalforestURL = 'http://www.esenvironmental.**
>>> com/kml/national_forests.kml<http://www.esenvironmental.com/kml/national_forests.kml>
>>> ';
>>> var kmlLayerWildernessURL = 'http://www.esenvironmental.**
>>> com/kml/wilderness.kml<http://www.esenvironmental.com/kml/wilderness.kml>
>>> ';
>>> var kmlLayerBoundaryURL = 'http://www.esenvironmental.**
>>> com/kml/study_region.kml<http://www.esenvironmental.com/kml/study_region.kml>
>>> ';
>>> <!-- preserveViewport prevents the map from zooming to the specific kml
>>> file -->
>>> var kmlOptions = {
>>> preserveViewport: true
>>> };
>>>
>>> kmlLayerNationalforest = new
>>> google.maps.KmlLayer(**kmlLayerNationalforestURL,
>>> kmlOptions);
>>> kmlLayerNationalforest.**setMap(null);
>>>
>>> kmlLayerWilderness = new google.maps.KmlLayer(**kmlLayerWildernessURL,
>>> kmlOptions);
>>> kmlLayerWilderness.setMap(**null);
>>>
>>> kmlLayerBoundary = new google.maps.KmlLayer(**kmlLayerBoundaryURL,
>>> kmlOptions);
>>> kmlLayerBoundary.setMap(map);
>>>
>>>
>>> document.getElementById('show_**hide_KML_Layer_Nationalforest'**).checked
>>> = false;
>>> document.getElementById('show_**hide_KML_Layer_Wilderness').**checked =
>>> false;
>>> document.getElementById('show_**hide_KML_Layer_Boundary').**checked =
>>> true;
>>> document.getElementById('show_**hide_Layer').checked = true;
>>> //In the Javascript OUTSIDE of where you are creating your map, toggle
>>> the display of the KML Layers
>>> //(see near the end of this Java Script code). If the toggle is created
>>> inside the map code, toggling will NOT work!
>>>
>>>
>>> var pieChart = new google.visualization.**ChartWrapper({
>>> containerId: "visualization",
>>> chartType: "PieChart",
>>> options: {
>>> colors: ['#0000CC', '#3399FF', '#66CC00', '#FFFF00',
>>> '#FF9933', '#FF0033'],
>>> legendTextStyle: {
>>> color: '#666666',
>>> fontSize: '11'
>>> },
>>> titleTextStyle: {
>>> color: '#006600',
>>> fontSize: '12'
>>> },
>>> titlePosition: 'out',
>>> legend: 'left',
>>> is3D: true,
>>> height: 150,
>>> width: 350,
>>> backgroundColor: 'none',
>>> tooltip: {
>>> textStyle: {
>>> color: 'black'
>>> },
>>> showColorCode: true
>>> },
>>> pieSliceText: 'percentage',
>>> pieSliceTextStyle: {
>>> color: 'white',
>>> fontSize: '11'
>>> },
>>> chartArea: {
>>> top: '30',
>>> left: '5',
>>> height: "80%",
>>> width: "70%"
>>> }
>>> }
>>> });
>>>
>>>
>>> drawVisualization('Bear Branch');
>>> var query = new google.visualization.Query('ht**tp://www.google.com/
>>> **fusiontables/gvizdata?tq='<http://www.google.com/fusiontables/gvizdata?tq='>
>>> );
>>> query.setQuery('SELECT Site, CALK, MAGIC_CL50 FROM 3235688');
>>> query.send(function(response) {
>>> var data = response.getDataTable();
>>> var baseView = new google.visualization.DataView(**data);
>>> baseView.setColumns([1, 2]);
>>> var scatter = new google.visualization.**ChartWrapper({
>>> containerId: "scatter",
>>> chartType: "ScatterChart",
>>> dataTable: baseView,
>>> options: {
>>> width: 300,
>>> height: 300,
>>> titleX: 'ANC (ueq/L)', fontSize: '12',
>>> title: 'Site',
>>> backgroundColor: {fill: 'white'},
>>> titleTextStyle: {
>>> color: '#006600',
>>> fontSize: '12'
>>> },
>>> titleY: 'CL for ANC=50 (meq/m2/yr)', fontSize: '12',
>>> fontName: 'Arial',
>>> series: [{
>>> pointSize: 5
>>> }, {
>>> visibleInLegend: false,
>>> pointSize: 10,
>>> color: 'red'
>>> }],
>>> legend: {
>>> position: 'none',
>>> textStyle: {
>>> color: 'blue',
>>> fontSize: 12
>>> }
>>> }
>>> }
>>> });
>>> var runOnce = google.visualization.events.**addListener(scatter,
>>> 'ready', function() {
>>> google.maps.event.addListener(**layer, 'click', function(e)
>>> {
>>> var Site = e.row['Site'].value;
>>> setScatterSelection(Site);
>>> drawVisualization(Site);
>>> });
>>>
>>> google.maps.event.**addDomListener(document.**getElementById('Site'),
>>> 'change', function() {
>>> var Site = this.value;
>>> updateLayerQuery(layer, Site);
>>> setScatterSelection(Site);
>>> drawVisualization(Site);
>>> });
>>>
>>> google.visualization.events.**removeListener(runOnce);
>>> });
>>>
>>> setScatterSelection('Bear Branch');
>>>
>>> function setScatterSelection(site) {
>>> var row = data.getFilteredRows([{
>>> column: 0,
>>> value: site
>>> }])[0];
>>> var view = new google.visualization.DataView(**baseView);
>>> view.setColumns([0, 1, {
>>> type: 'number',
>>> label: baseView.getColumnLabel(1),
>>> calc: function(dt, index) {
>>> if (row == index) {
>>> return dt.getValue(index, 1);
>>> }
>>> else {
>>> return null;
>>> }
>>> }}]);
>>>
>>> var ready = google.visualization.events.**addListener(scatter,
>>> 'ready', function() {
>>> scatter.getChart().**setSelection([{
>>> row: row,
>>> column: 2
>>> }]);
>>> google.visualization.events.**removeListener(ready);
>>> });
>>>
>>> scatter.setDataTable(view);
>>> scatter.setOption('title', site);
>>> scatter.draw();
>>> };
>>> });
>>>
>>> function drawVisualization(Site) {
>>> var pieQuery = new google.visualization.Query('ht**
>>> tp://www.google.com/**fusiontables/gvizdata?tq='<http://www.google.com/fusiontables/gvizdata?tq='>
>>> );
>>> pieQuery.setQuery("SELECT Site, BCw, BCdep, Nup, Nimm, ANClimit,
>>> BCup FROM 3235688 WHERE Site = '" + Site + "'");
>>> pieQuery.send(function(**response) {
>>> var baseData = response.getDataTable();
>>>
>>> var pieData = new google.visualization.**DataTable();
>>> pieData.addColumn('string', baseData.getColumnLabel(0));
>>> pieData.addColumn('number', 'Value');
>>>
>>> for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
>>> pieData.addRow([baseData.**getColumnLabel(i),
>>> baseData.getValue(0, i)]);
>>> }
>>>
>>> pieChart.setOption('title', Site);
>>> pieChart.setDataTable(pieData)**;
>>> pieChart.draw();
>>>
>>> basePieData = null;
>>> pieData = null;
>>> });
>>> }
>>>
>>> function updateLayerQuery(layer) {
>>> layer.setOptions({
>>> query: {
>>> select: 'Site',
>>> from: '3235688'
>>> }
>>> });
>>> }
>>> }
>>>
>>> function toggleKMLLayerBoundary() {
>>> if (!document.getElementById('**show_hide_KML_Layer_Boundary')**
>>> .checked)
>>> kmlLayerBoundary.setMap(null);
>>> else
>>> kmlLayerBoundary.setMap(map);
>>> }
>>> function toggleKMLLayerWilderness() {
>>> if (!document.getElementById('**show_hide_KML_Layer_**
>>> Wilderness').checked)
>>> kmlLayerWilderness.setMap(**null);
>>> else
>>> kmlLayerWilderness.setMap(map)**;
>>> }
>>> function toggleKMLLayerNationalforest() {
>>> if (!document.getElementById('**show_hide_KML_Layer_**
>>> Nationalforest').checked)
>>> kmlLayerNationalforest.setMap(**null);
>>> else
>>> kmlLayerNationalforest.setMap(**map);
>>> }
>>> function ToggleLayer() {
>>> var chkLayer = document.getElementById("show_**hide_Layer");
>>> if (chkLayer.checked === true) {
>>> //Turn layer on
>>> layer.setMap(map);
>>> }
>>> else {
>>> //Turn layer off
>>> layer.setMap(null);
>>> }
>>> }
>>>
>>> google.maps.event.**addDomListener(window, 'load', initialize);
>>> </script>
>>>
>>>
>>> On Wednesday, August 1, 2012 1:06:34 PM UTC-7, es wrote:
>>>
>>>> Oh yes... I see that now. However after making the change the fusion
>>>> layer still does not turn off and on. Any other thoughts?
>>>>
>>>> On Wednesday, August 1, 2012 12:58:51 PM UTC-7, asgallant wrote:
>>>>
>>>>> It's in the javascript; it should be:
>>>>>
>>>>> var chkLayer = document.getElementById("show_**hide_Layer");
>>>>>
>>>>> On Wednesday, August 1, 2012 3:53:31 PM UTC-4, es wrote:
>>>>>>
>>>>>> I tried using a lower case "l", but that didn't work either:
>>>>>> id="show_hide_layer". Is this the wrong id all together?
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Wednesday, August 1, 2012 12:34:01 PM UTC-7, asgallant wrote:
>>>>>>
>>>>>>> The id of the checkbox doesn't match the id you use to set the
>>>>>>> chkLayer variable in the ToggleLayer function.
>>>>>>>
>>>>>>> On Wednesday, August 1, 2012 3:15:43 PM UTC-4, es wrote:
>>>>>>>>
>>>>>>>> I have unsuccessfully tried to create a toggle (checkbox) for my
>>>>>>>> google fusion tables layer which should work with the toggling of my
>>>>>>>> kml
>>>>>>>> layers (the kml layers toggle off and on my map successfully). Here
>>>>>>>> are
>>>>>>>> some snippets of code that I am using to code the klm layers and the
>>>>>>>> one
>>>>>>>> google fusion layer. I have not included a bunch of other coding,
>>>>>>>> including the pie and scatter plots (also referencing the fusion table
>>>>>>>> layer). Thanks in advance for any help!
>>>>>>>>
>>>>>>>> function initialize() {
>>>>>>>> var myOptions = {
>>>>>>>> center: new google.maps.LatLng(38.099983, -80.683594),
>>>>>>>> zoom: 7,
>>>>>>>> mapTypeControl: true,
>>>>>>>> mapTypeControlOptions: {
>>>>>>>> style: google.maps.**MapTypeControlStyle.**
>>>>>>>> HORIZONTAL_BAR,
>>>>>>>> position: google.maps.ControlPosition.**TOP_RIGHT
>>>>>>>> },
>>>>>>>> zoomControlOptions: {
>>>>>>>> style: google.maps.ZoomControlStyle.**LARGE
>>>>>>>> },
>>>>>>>> streetViewControl: true,
>>>>>>>> streetViewControlOptions: {
>>>>>>>> position: google.maps.ControlPosition.**LEFT_TOP
>>>>>>>> },
>>>>>>>> mapTypeId: google.maps.MapTypeId.TERRAIN
>>>>>>>> };
>>>>>>>>
>>>>>>>> map = new google.maps.Map(document.**getElementById('map_canvas'),
>>>>>>>> myOptions);
>>>>>>>> //the "layer" is the one I am trying to have function with a
>>>>>>>> toggle
>>>>>>>> var layer = new google.maps.FusionTablesLayer(**);
>>>>>>>> updateLayerQuery(layer);
>>>>>>>> layer.setMap(null);
>>>>>>>>
>>>>>>>> var kmlLayerWildernessURL = 'http://www.esenvironmental.**
>>>>>>>> com/kml/wilderness.kml<http://www.esenvironmental.com/kml/wilderness.kml>
>>>>>>>> ';
>>>>>>>> var kmlLayerBoundaryURL = 'http://www.esenvironmental.**
>>>>>>>> com/kml/study_region.kml<http://www.esenvironmental.com/kml/study_region.kml>
>>>>>>>> ';
>>>>>>>> var kmlOptions = {
>>>>>>>> preserveViewport: true
>>>>>>>> };
>>>>>>>>
>>>>>>>>
>>>>>>>> kmlLayerWilderness = new google.maps.KmlLayer(**kmlLayerWildernessURL,
>>>>>>>> kmlOptions);
>>>>>>>> kmlLayerWilderness.setMap(**null);
>>>>>>>> kmlLayerBoundary = new google.maps.KmlLayer(**kmlLayerBoundaryURL,
>>>>>>>> kmlOptions);
>>>>>>>> kmlLayerBoundary.setMap(map);
>>>>>>>>
>>>>>>>> document.getElementById('show_**hide_KML_Layer_Wilderness').**checked
>>>>>>>> = false;
>>>>>>>> document.getElementById('show_**hide_KML_Layer_Boundary').**checked
>>>>>>>> = true;
>>>>>>>> document.getElementById('show_**hide_Layer').checked = false;
>>>>>>>>
>>>>>>>> function toggleKMLLayerBoundary() {
>>>>>>>> if (!document.getElementById('**
>>>>>>>> show_hide_KML_Layer_Boundary')**.checked)
>>>>>>>> kmlLayerBoundary.setMap(null);
>>>>>>>> else
>>>>>>>> kmlLayerBoundary.setMap(map);
>>>>>>>> }
>>>>>>>> function toggleKMLLayerWilderness() {
>>>>>>>> if (!document.getElementById('**show_hide_KML_Layer_**
>>>>>>>> Wilderness').checked)
>>>>>>>> kmlLayerWilderness.setMap(**null);
>>>>>>>> else
>>>>>>>> kmlLayerWilderness.setMap(map)**;
>>>>>>>> }
>>>>>>>> function ToggleLayer() {
>>>>>>>> var chkLayer = document.getElementById("**chkLayer");
>>>>>>>> if (chkLayer.checked === true) {
>>>>>>>> //Turn layer on
>>>>>>>> layer.setMap(map);
>>>>>>>> }
>>>>>>>> else {
>>>>>>>> //Turn layer off
>>>>>>>> layer.setMap(null);
>>>>>>>> }
>>>>>>>> }
>>>>>>>> <!-- Below is the code for the checkboxes: -->
>>>>>>>> Show:<input type="checkbox" id="show_hide_KML_Layer_**Boundary"
>>>>>>>> onClick="**toggleKMLLayerBoundary();" />Study Area<p>
>>>>>>>> Show:<input type="checkbox" id="show_hide_KML_Layer_**Wilderness"
>>>>>>>> onClick="**toggleKMLLayerWilderness();" />Wilderness<p>
>>>>>>>> Show:<input type="checkbox" id="show_hide_Layer"
>>>>>>>> onClick="toggleLayer();" />Sites<p>
>>>>>>>> <!-- Above is the code for the checkboxes: -->
>>>>>>>>
>>>>>>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Visualization API" group.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msg/google-visualization-api/-/BcZdEWox9icJ.
>>
>> To post to this group, send email to
>> [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> For more options, visit this group at
>> http://groups.google.com/group/google-visualization-api?hl=en.
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/WjFQ9ztIel8J.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
