I am trying to make a web map using the Google Maps Javascript API. I want a Google Fusion Table of buildings in Boston to appear only on the stylized map which I called "Buildings." When I click on the Buildings map type, the buildings layer appears. Then when I click on the road and satellite map, the buildings layer disappears just how I want it to. However, if I first click on the road or satellite map type and then click the Buildings map type, the buildings layer doesn't load. I can't figure out why. Thanks!
<!DOCTYPE html>
<html>
<head>
<h3 align="center">Boston, MA</h3>
<title>Massachusetts, USA</title>
<meta name="Running Destinations" content="initial-scale=1.0, user-scalable=no">
<meta name="author" content="CodingGrandma">
<meta charset="utf-8">
<style>
/* formatting for html containing the map */
body {background-color: White;}
h3 {color: Black;}
/* formatting for map */
#map {
height: 75%;
}
html, body {
height: 100%;
margin: 1;
padding: 0;
}
</style>
</head>
<body>
1 foot<input type="radio" name="Storm Surge" value="1 foot" id="1_ft_surge"/><br/>
2 foot<input type="radio" name="Storm Surge" value="2 foot" id="2_ft_surge"/><br/>
<div id="map"></div>
<script>
var map;
var mapType;
var layer = new google.maps.FusionTablesLayer(null);
function initMap() {
// Create Styled Map Object
var styledMapType = new google.maps.StyledMapType(
[
{
"featureType": "administrative",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "landscape",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"stylers": [
{
"color": "#84afa3"
},
{
"lightness": 52
}
]
},
{
"stylers": [
{
"saturation": -17
},
{
"gamma": 0.36
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#3f518c"
}
]
}
],
//Remember to include name for map style you created
{name: 'Buildings'});
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 42.340885, lng: -71.047289},
zoom: 13,
panControl:true,
scaleControl:true,
zoomControl:true,
zoomControlOptions:{
style: google.maps.ZoomControlStyle.LARGE},
mapTypeControl: true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
zoomControlOptions:{
style:google.maps.ZoomControlStyle.LARGE,
position:google.maps.ControlPosition.RIGHT_CENTER
},
//add your style to MapTypeOptions below
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
google.maps.event.addListener(map, 'maptypeid_changed', function() {
mapType = map.getMapTypeId();
AddBuildings()
});
map.mapTypes.set('styled_map',styledMapType);
}
function AddBuildings(){
if (mapType == "styled_map") {
layer = new google.maps.FusionTablesLayer({
query:{
select: 'geometry',
from: '1mzPT_gVGQRujbzIdPTzV8swo2AI611PEwIKwzgj7',
}
});
layer.setMap(map);
} else {
layer.setMap(null);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBV-z3Aar9YGZXept2AXxLY_70TL317mPA&callback=initMap">
</script>
I get javascript errors with the posted code:
Uncaught ReferenceError: google is not definedUncaught TypeError: Cannot read property 'setMap' of undefined.You can't use the Google Maps Javascript API v3 until it is loaded.
Move the initialization of layer:
var layer = new google.maps.FusionTablesLayer(null);
inside the initMap function (like map and mapType), that function runs once the API has finished loading and is available for use.
var layer;
function initMap() {
layer = new google.maps.FusionTablesLayer(null);
proof of concept fiddle (loads the API synchronously)
code snippet:
var map;
var mapType;
var layer;
function initMap() {
layer = new google.maps.FusionTablesLayer(null);
// Create Styled Map Object
var styledMapType = new google.maps.StyledMapType(
[{
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "water",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "landscape",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.highway",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.local",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "water",
"stylers": [{
"color": "#84afa3"
},
{
"lightness": 52
}
]
},
{
"stylers": [{
"saturation": -17
},
{
"gamma": 0.36
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{
"color": "#3f518c"
}]
}
],
//Remember to include name for map style you created
{
name: 'Buildings'
});
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 42.340885,
lng: -71.047289
},
zoom: 13,
panControl: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
//add your style to MapTypeOptions below
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
google.maps.event.addListener(map, 'maptypeid_changed', function() {
mapType = map.getMapTypeId();
AddBuildings()
});
map.mapTypes.set('styled_map', styledMapType);
}
function AddBuildings() {
if (mapType == "styled_map") {
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1mzPT_gVGQRujbzIdPTzV8swo2AI611PEwIKwzgj7',
}
});
layer.setMap(map);
} else {
layer.setMap(null);
}
}/* formatting for html containing the map */
body {
background-color: White;
}
h3 {
color: Black;
}
/* formatting for map */
#map {
height: 75%;
}
html,
body {
height: 100%;
margin: 1;
padding: 0;
}1 foot<input type="radio" name="Storm Surge" value="1 foot" id="1_ft_surge" /><br/> 2 foot<input type="radio" name="Storm Surge" value="2 foot" id="2_ft_surge" /><br/>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBV-z3Aar9YGZXept2AXxLY_70TL317mPA&callback=initMap"></script>