>
> 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 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.
