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:
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")
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
});
<input type="checkbox" id="show_hide_layer1" checked onchange="toggleLayer(layer1)" />
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>