Google Maps API - Fusion Table/Maps Engine Toggle On/Off ... Combined with Search

Question

Newbie to posting at Stack Overflow ... but have found many answers here

Working my way through Google Maps API Tutorials/user group/forums building an interactive map with several capabilities. Combining and adapting various code examples (and trying my best to clean up as I go)

Hosting on Google Sites (this is a pilot project), working via Chrome, on a MAC.

Can get Map to appear, load layers (both Maps Engine and Fusion Table), access styled map option, search Fusion Table column, and toggle Maps Engine layer off and on.

However - cannot toggle Fusion Table layer on and off - not sure if it is html or java script issue/mistake

Javascript

var layerl=null;
var layer2=null;
var map=null;

function changeMapl0() {
    var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
    layerl.setOptions({
            query: {
                select: 'col7',
                from: '1XXG0ylzvi4_eiR-Hn_F3HMo_H73qhX8oznErkDo',
                where: "'Activities' contains '" + searchString + "'"
            }
        });
}

//Toggle Map Layers on and off

function toggleLayer(this_layer) {
    if (this_layer.getMap()) {
        this_layer.setMap(null);
    } else {
        this_layer.setMap(map);
    }
}


function initialize() {

    //Create map styling array to pass to StyledMapType object, then 'Map Options'

    var styleArray = [{
            featureType: 'all',
            stylers: [{
                    saturation: -80
                }
            ]
        }, {
            featureType: 'road.arterial',
            elementType: 'geometry',
            stylers: [{
                    hue: '#00ffee'
                }, {
                    saturation: 50
                }
            ]
        }, {
            featureType: 'poi.business',
            elementType: 'labels',
            stylers: [{
                    visibility: 'off'
                },

            ]
        }, {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{
                    hue: '#00FF00'
                }, {
                    saturation: 50
                }
            ]
        }
    ];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.

    var styledMap = new google.maps.StyledMapType(styleArray, {
            name: "Park View"
        });

    var mapOptions = {
        center: new google.maps.LatLng(47.303009, -120.640421),
        zoom: 6,
        //Add style selection to "Controls"
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, mapOptions);

    //Associate the styled map with the MapTypeId and set it to display.
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
    layerl = new google.maps.FusionTablesLayer({
            query: {
                select: 'col7',
                from: '1XXG0ylzvi4_eiR-Hn_F3HMo_H73qhX8oznErkDo'
            },
            map: map,
            //styleId: 2,
            //templateId: 1
            clickable: true,
            suppressInfoWindows: false
        });
    layer2 = new google.maps.visualization.MapsEngineLayer({
            layerId: '09076743293683044306-02766294797946426855',
            map: map,
            clickable: true,
            suppressInfoWindows: false
        });

}

google.maps.event.addDomListener(window, 'load', initialize);

HTML

<html>
  <head>
    <title>Washington State Parks Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href='style.css' rel='stylesheet'>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt1B6SegrAzrT75VXXjpecvVsuZHjxxRA">
    </script>
    <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyDt1B6SegrAzrT75VXXjpecvVsuZHjxxRA">
    </script>

    <script type="text/javascript"
      src="code.js">

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>

    <section>

    <div id="spsearch">
      <h2>Search Parks by Activity</h2>
      <select id="search-string-l0" onchange="changeMapl0(this.value);">
        <option value="">--Select--</option>
        <option value=",">Reset Map</option>
        <option value="camping">Camping</option>
        <option value="beach exploration">Beach Exploration</option>
        <option value="bird watching">Bird Watching</option>
        <option value="ball fields">Ball Fields</option>
        <option value="boating">Boating</option>
        <option value="boating (non-motorized only)">Boating (Non-Motorized Only)</option>
        <option value="fishing or shellfish">Fishing or Shellfish</option>
        <option value="interpretative center/museum">Interpretative Center/Museum</option>
        <option value="scuba diving">Scuba Diving</option>
        <option value="swimming">Swimming</option>
        <option value="water-skiing">Water-Skiing</option>
        <option value="playground equipment">Playground Equipment</option>
        <option value="hiking">Hiking</option>
        <option value="mountain biking">Mountain Biking</option>
        <option value="equestrian">Equestrian</option>
        <option value="cross-country skiing">Cross-Country Skiing</option>
        <option value="snowmobiling">Snowmobiling</option>
        <option value="ORV">ORV</option>
      </select>
    </div>
    <div id="spproperty">
    <h2> State Park Property</h2>
            <input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)" />
            <label>Park Locations</label>
            <input type="checkbox" id="show_hide_layer2" checked onchange="toggleLayer(layer2)" />
            <label>All Park Lands</label>

    </div>

    </section>
  </body>
</html>

Link to map:

https://d9eb1e4ef9aef675fa5d8c1fe4a34277aff67288.googledrive.com/host/0B1PH1OgB_b5LTURPMWdGd2Uyc2s/index.html

Why are you including the API twice? You should see a message about that in the javascript console. — geocodezip, Dec 15 '14 at 18:48

geocodezip · Accepted Answer · 2014-12-15T19:09:37.303

You have a typo in your code (and an obvious, but hard to see javascript error reported: Uncaught ReferenceError: layer1 is not defined)

layerl != layer1 (layer "L" != layer "One")

layer "L"

var layerl=null;
layerl = new google.maps.FusionTablesLayer({
        query: {
            select: 'col7',
            from: '1XXG0ylzvi4_eiR-Hn_F3HMo_H73qhX8oznErkDo'
        },
        map: map,
        //styleId: 2,
        //templateId: 1
        clickable: true,
        suppressInfoWindows: false
    });

layer "One"

 <input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)" />

working fiddle

var layer1 = null;
var layer2 = null;
var map = null;

function changeMapl0() {
    var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
    layer1.setOptions({
        query: {
            select: 'col7',
            from: '1XXG0ylzvi4_eiR-Hn_F3HMo_H73qhX8oznErkDo',
            where: "'Activities' contains '" + searchString + "'"
        }
    });
}

//Toggle Map Layers on and off

function toggleLayer(this_layer) {
    if (this_layer.getMap()) {
        this_layer.setMap(null);
    } else {
        this_layer.setMap(map);
    }
}


function initialize() {

    //Create map styling array to pass to StyledMapType object, then 'Map Options'

    var styleArray = [{
        featureType: 'all',
        stylers: [{
            saturation: -80
        }]
    }, {
        featureType: 'road.arterial',
        elementType: 'geometry',
        stylers: [{
            hue: '#00ffee'
        }, {
            saturation: 50
        }]
    }, {
        featureType: 'poi.business',
        elementType: 'labels',
        stylers: [{
            visibility: 'off'
        }

        ]
    }, {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [{
            hue: '#00FF00'
        }, {
            saturation: 50
        }]
    }];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.

    var styledMap = new google.maps.StyledMapType(styleArray, {
        name: "Park View"
    });

    var mapOptions = {
        center: new google.maps.LatLng(47.303009, -120.640421),
        zoom: 6,
        //Add style selection to "Controls"
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, mapOptions);

    //Associate the styled map with the MapTypeId and set it to display.
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
    layer1 = new google.maps.FusionTablesLayer({
        query: {
            select: 'col7',
            from: '1XXG0ylzvi4_eiR-Hn_F3HMo_H73qhX8oznErkDo'
        },
        map: map,
        //styleId: 2,
        //templateId: 1
        clickable: true,
        suppressInfoWindows: false
    });
    layer2 = new google.maps.visualization.MapsEngineLayer({
        layerId: '09076743293683044306-02766294797946426855',
        map: map,
        clickable: true,
        suppressInfoWindows: false
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,visualization"></script>
<div id="map-canvas"></div>
<section>
    <div id="spsearch">
         <h2>Search Parks by Activity</h2>

        <select id="search-string-l0" onchange="changeMapl0(this.value);">
            <option value="">--Select--</option>
            <option value=",">Reset Map</option>
            <option value="camping">Camping</option>
            <option value="beach exploration">Beach Exploration</option>
            <option value="bird watching">Bird Watching</option>
            <option value="ball fields">Ball Fields</option>
            <option value="boating">Boating</option>
            <option value="boating (non-motorized only)">Boating (Non-Motorized Only)</option>
            <option value="fishing or shellfish">Fishing or Shellfish</option>
            <option value="interpretative center/museum">Interpretative Center/Museum</option>
            <option value="scuba diving">Scuba Diving</option>
            <option value="swimming">Swimming</option>
            <option value="water-skiing">Water-Skiing</option>
            <option value="playground equipment">Playground Equipment</option>
            <option value="hiking">Hiking</option>
            <option value="mountain biking">Mountain Biking</option>
            <option value="equestrian">Equestrian</option>
            <option value="cross-country skiing">Cross-Country Skiing</option>
            <option value="snowmobiling">Snowmobiling</option>
            <option value="ORV">ORV</option>
        </select>
    </div>
    <div id="spproperty">
         <h2> State Park Property</h2>

        <input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)" />
        <label>Park Locations</label>
        <input type="checkbox" id="show_hide_layer2" checked onchange="toggleLayer(layer2)" />
        <label>All Park Lands</label>
    </div>
</section>

Thanks - Sorry for not responding earlier ... caught the mistake myself after a line by line reread ... — Ron Hall, Jan 08 '15 at 04:14

Google Maps API - Fusion Table/Maps Engine Toggle On/Off ... Combined with Search

1 Answers1