[SOLVED] Where to add the Weather Layer on this custom map?

Where to add the Weather Layer on this custom map?

I need some help in figuring out where to put any of the weather layer code to a custom Google Map (API v3), any input would be greatly appreciated :)

We have created a custom Google Map, and on it we have 2 Fusion Table layers with a simple toggle. From the developer documentation, and what I have found here on this site, I can see I need to add this bit of code:

var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);

but I am totally clueless as to where to place this, as each time I have tried adding it (2 days now) the code breaks and I am shown a blank white page with all kinds of errors in the F12 Console window.

Where do we need to add that, and how can we add it to the toggle? Here is what we have working:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    var map;

    var layer1;
    var tableid = '';

    var layer2;
    var tableid2 = 'xxxxx';

    var layer3;
    var tableid3 = 'xxxxx';

    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(31.499, -111.202),
        zoom: 10,
     mapTypeControl: true,
        mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
    },
    streetViewControl: false,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  });

  var styledMapType = new google.maps.StyledMapType({
    map: map,
    name: 'Styled Map'
  });

  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');

  layer1 = new google.maps.FusionTablesLayer({
    query: {
      select: '',
      from: tableid
    },
    map: map
  });

  layer2 = new google.maps.FusionTablesLayer({
    query: {
      select: 'LOC',
      from: tableid2
    },
    map: map
  });

  layer3 = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: tableid3
    },
suppressInfoWindows:true,
    map: map
  });
}


function changeMap(layerNum) {
  if (layerNum == 2) {
    update(layer2);
  }
  if (layerNum == 3) {
    update(layer3);
  }
}

function update(layer) {
  var layerMap = layer.getMap();
  if (layerMap) {
    layer.setMap(null);
  } else {
    layer.setMap(map);
  }
}

</script>

<style type="text/css">
    #toggle_box { 
        position: absolute; 
        top: 7px; 
        right: 7px; 
        padding: 3px; 
        border: 1px solid #707735; 
        background: #DED9C6; 
        font-family: 'Coda', cursive;
    }
    body { 
        margin: 0px; 
        padding: 0px;
        font-family: 'Coda', cursive;
        }
    #map_canvas {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-family: 'Coda', cursive;
    }
    </style>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
<div id="toggle_box"><input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />REFERENCE POINTS
<input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />AZ COUNTIES</div>
    </body>
    </html>

Solution

Place it somewhere where the map is initialized, e.g. before that line:

var styledMapType = new google.maps.StyledMapType({