Hmm.... no such luck! I have now moved it to to following:
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);
* 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 Thu, Aug 2, 2012 at 9:45 AM, asgallant <[email protected]> wrote:
> 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(**initi**alize);
>>>> var map;
>>>> function initialize() {
>>>> var myOptions = {
>>>> center: new google.maps.LatLng(38.099983, -80.683594),
>>>> zoom: 7,
>>>> mapTypeControl: true,
>>>> mapTypeControlOptions: {
>>>> style: google.maps.**MapTypeControlStyl**e.**
>>>> HORIZONTAL_BAR,
>>>> position: google.maps.ControlPosition.**TO**P_RIGHT
>>>> },
>>>> zoomControlOptions: {
>>>> style: google.maps.ZoomControlStyle.**L**ARGE
>>>> },
>>>> streetViewControl: true,
>>>> streetViewControlOptions: {
>>>> position: google.maps.ControlPosition.**LE**FT_TOP
>>>> },
>>>> mapTypeId: google.maps.MapTypeId.TERRAIN
>>>> };
>>>>
>>>> map = new google.maps.Map(document.**getEl**ementById('map_canvas'),
>>>> myOptions);
>>>> var layer = new google.maps.FusionTablesLayer(****);
>>>> updateLayerQuery(layer);
>>>> layer.setMap(map);
>>>>
>>>> var kmlLayerNationalforestURL = 'http://www.esenvironmental.**co**
>>>> m/kml/national_forests.kml<http://www.esenvironmental.com/kml/national_forests.kml>
>>>> ';
>>>> var kmlLayerWildernessURL = 'http://www.esenvironmental.**co**
>>>> m/kml/wilderness.kml<http://www.esenvironmental.com/kml/wilderness.kml>
>>>> ';
>>>> var kmlLayerBoundaryURL = 'http://www.esenvironmental.**co**
>>>> m/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(**kmlLayerN**ationalforestURL,
>>>> kmlOptions);
>>>> kmlLayerNationalforest.**setMap**(null);
>>>>
>>>> kmlLayerWilderness = new google.maps.KmlLayer(**kmlLayerW**ildernessURL,
>>>> kmlOptions);
>>>> kmlLayerWilderness.setMap(**nul**l);
>>>>
>>>> kmlLayerBoundary = new google.maps.KmlLayer(**kmlLayerB**oundaryURL,
>>>> kmlOptions);
>>>> kmlLayerBoundary.setMap(map);
>>>>
>>>>
>>>> document.getElementById('show_****hide_KML_Layer_Nationalforest'****).checked
>>>> = false;
>>>> document.getElementById('show_****hide_KML_Layer_Wilderness').**ch**ecked
>>>> = false;
>>>> document.getElementById('show_****hide_KML_Layer_Boundary').**chec**ked
>>>> = 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.**ChartWrap**per({
>>>> 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/**fusiontabl**es/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.**ChartWrap**per({
>>>> 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.**ad**dListener(scatter,
>>>> 'ready', function() {
>>>> google.maps.event.addListener(****layer, 'click',
>>>> function(e) {
>>>> var Site = e.row['Site'].value;
>>>> setScatterSelection(Site);
>>>> drawVisualization(Site);
>>>> });
>>>> google.maps.event.**addDomListen**er(document.**
>>>> getElementById('**Site'), 'change', function() {
>>>> var Site = this.value;
>>>> updateLayerQuery(layer, Site);
>>>> setScatterSelection(Site);
>>>> drawVisualization(Site);
>>>> });
>>>>
>>>> google.visualization.events.**re**moveListener(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.**ad**dListener(scatter,
>>>> 'ready', function() {
>>>> scatter.getChart().**setSelectio**n([{
>>>> row: row,
>>>> column: 2
>>>> }]);
>>>> google.visualization.events.**re**moveListener(ready);
>>>> });
>>>>
>>>> scatter.setDataTable(view);
>>>> scatter.setOption('title', site);
>>>> scatter.draw();
>>>> };
>>>> });
>>>>
>>>> function drawVisualization(Site) {
>>>> var pieQuery = new google.visualization.Query('ht****
>>>> tp://www.google.com/**fusiontabl**es/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(**respons**e) {
>>>> 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.**getCo**lumnLabel(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('**sho**
>>>> w_hide_KML_Layer_Boundary')**.**checked)
>>>> kmlLayerBoundary.setMap(null);
>>>> else
>>>> kmlLayerBoundary.setMap(map);
>>>> }
>>>> function toggleKMLLayerWilderness() {
>>>> if (!document.getElementById('**sho**w_hide_KML_Layer_**
>>>> Wilderness').**checked)
>>>> kmlLayerWilderness.setMap(**null**);
>>>> else
>>>> kmlLayerWilderness.setMap(map)****;
>>>> }
>>>> function toggleKMLLayerNationalforest() {
>>>> if (!document.getElementById('**sho**w_hide_KML_Layer_**
>>>> Nationalfores**t').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.**addDomListen**er(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.**MapTypeControlStyl**e.**
>>>>>>>>> HORIZONTAL_BAR,
>>>>>>>>> position: google.maps.ControlPosition.**TO**P_RIGHT
>>>>>>>>> },
>>>>>>>>> zoomControlOptions: {
>>>>>>>>> style: google.maps.ZoomControlStyle.**L**ARGE
>>>>>>>>> },
>>>>>>>>> streetViewControl: true,
>>>>>>>>> streetViewControlOptions: {
>>>>>>>>> position: google.maps.ControlPosition.**LE**FT_TOP
>>>>>>>>> },
>>>>>>>>> mapTypeId: google.maps.MapTypeId.TERRAIN
>>>>>>>>> };
>>>>>>>>>
>>>>>>>>> map = new google.maps.Map(document.**getEl**ementById('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.**co**
>>>>>>>>> m/kml/wilderness.kml<http://www.esenvironmental.com/kml/wilderness.kml>
>>>>>>>>> ';
>>>>>>>>> var kmlLayerBoundaryURL = 'http://www.esenvironmental.**co**
>>>>>>>>> m/kml/study_region.kml<http://www.esenvironmental.com/kml/study_region.kml>
>>>>>>>>> ';
>>>>>>>>> var kmlOptions = {
>>>>>>>>> preserveViewport: true
>>>>>>>>> };
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> kmlLayerWilderness = new
>>>>>>>>> google.maps.KmlLayer(**kmlLayerW**ildernessURL,
>>>>>>>>> kmlOptions);
>>>>>>>>> kmlLayerWilderness.setMap(**nul**l);
>>>>>>>>> kmlLayerBoundary = new google.maps.KmlLayer(**kmlLayerB**oundaryURL,
>>>>>>>>> kmlOptions);
>>>>>>>>> kmlLayerBoundary.setMap(map);
>>>>>>>>>
>>>>>>>>> document.getElementById('show_****hide_KML_Layer_Wilderness').**ch
>>>>>>>>> **ecked = false;
>>>>>>>>> document.getElementById('show_****hide_KML_Layer_Boundary').**chec
>>>>>>>>> **ked = true;
>>>>>>>>> document.getElementById('show_****hide_Layer').checked = false;
>>>>>>>>>
>>>>>>>>> function toggleKMLLayerBoundary() {
>>>>>>>>> if (!document.getElementById('**sho**
>>>>>>>>> w_hide_KML_Layer_Boundary')**.**checked)
>>>>>>>>> kmlLayerBoundary.setMap(null);
>>>>>>>>> else
>>>>>>>>> kmlLayerBoundary.setMap(map);
>>>>>>>>> }
>>>>>>>>> function toggleKMLLayerWilderness() {
>>>>>>>>> if (!document.getElementById('**sho**w_hide_KML_Layer_**
>>>>>>>>> Wilderness').**checked)
>>>>>>>>> kmlLayerWilderness.setMap(**null**);
>>>>>>>>> else
>>>>>>>>> kmlLayerWilderness.setMap(map)****;
>>>>>>>>> }
>>>>>>>>> function ToggleLayer() {
>>>>>>>>> var chkLayer = document.getElementById("**chkLa**yer");
>>>>>>>>> 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_**Bounda**ry"
>>>>>>>>> onClick="**toggleKMLLayerBoundar**y();" />Study Area<p>
>>>>>>>>> Show:<input type="checkbox" id="show_hide_KML_Layer_**Wilder**ness"
>>>>>>>>> onClick="**toggleKMLLayerWildern**ess();" />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<https://groups.google.com/d/msg/google-visualization-api/-/BcZdEWox9icJ>
>>> .
>>>
>>> To post to this group, send email to google-visualization-api@**
>>> googlegroups.com <[email protected]>.
>>> To unsubscribe from this group, send email to google-visualization-api+*
>>> *[email protected]<google-visualization-api%[email protected]>
>>> .
>>> For more options, visit this group at http://groups.google.com/**
>>> group/google-visualization-**api?hl=en<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.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
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.
