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';
> var kmlLayerWildernessURL = '
> http://www.esenvironmental.com/kml/wilderness.kml';
> var kmlLayerBoundaryURL = '
> 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('
> 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('
> 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';
>>>>>> var kmlLayerBoundaryURL = '
>>>>>> 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.
