Hey guys I’m trying to add in different layer for my map but I ran into some trouble with the weather layer.When I add the traffic layer by itself the map works but when I add the weather layer only a gray box where the map should have been appears. Any help will be great thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="Get ready to experience Indianapolis! This site will make your visit the best one yet!"/>
<title>The Indy Tour- Travel</title>
<link href="../style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA6VosQrKQOjoTbDSp4Kk4BHvofOJFUfZU&sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var all = [
["Indianapolis International Airport", "7800 Col. H. Weir Cook Memorial Drive", "Indianapolis", "IN", "46241", "null", "null", "airport"],
["Indianapolis International Airport", "7800 Col. H. Weir Cook Memorial Drive", "Indianapolis", "IN", "46241", "39.71449", "-86.29842", "airport"],
["Location 2", "7205 Olmstead Dr", "Burlington", "NC", "27215", "36.069974", "-79.548101", "airport",],
["Location 3", "W Market St", "Graham", "NC", "27253", "36.0722225", "-79.4016207", "resturant"],
["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC", "27253", "35.9826328", "-79.4165216", "hotel"],
["Location 5", "415 Spring Garden St", "Greensboro", "NC", "27401", "36.06761", "-79.794984", "hotel"]
];
var infoWindow = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
var pos = new google.maps.LatLng(39.76656, -86.15);
map.setCenter(pos);
function infoCallback(infowindow, marker) {
return function() {
infowindow.open(map, marker);
};
}
function setMarkers(map, all) {
for (var i in all) {
var name = all[i][0];
var address = all[i][1];
var city = all[i][2];
var state = all[i][3];
var zip = all[i][4];
var lat = all[i][5];
var lng = all[i][6];
var image = all[i][7];
var latlngset;
latlngset = new google.maps.LatLng(lat, lng);
var icon=null;
if (image=="airport") {
icon=airport;
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset, icon: icon, shadow: shadow
});
}
else if (image=="hotel") {
icon=hotel;
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset, icon: icon, shadow: shadow
});
}
else if (image=="resturant") {
icon=resturant;
var marker = new google.maps.Marker({
map: map, title: city, position: latlngset, icon: icon, shadow: shadow
});
}
var airport = new google.maps.MarkerImage(
'../images/airport.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var hotel = new google.maps.MarkerImage(
'../images/hotel.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var resturant = new google.maps.MarkerImage(
'../images/resturant.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var shadow = new google.maps.MarkerImage(
'../images/shadow.png',
new google.maps.Size(54,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
google.maps.event.addListener(
marker,
'click',
infoCallback(infowindow, marker)
);
}
}
setMarkers(map, all);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="logo">
<div id="wrap">
<div id="header">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="History.html">History</a></li>
<li><a href="Attractions.html">Attractions</a></li>
<li><a href="Landmarks.html">Landmarks</a></li>
<li><a href="#" style="color:#F60; text-decoration:underline;">Travel</a></li>
</ul>
</div>
<div id="content">
<h1 id="title">Travel</h1>
<div id="map_canvas"></div>
<img id="line" alt="footer" src="../images/footer.png"/>
<div id="footer">
<ul id="ftext">
<li><a href="About.html">About the Team and Site</a></li>
<li><p style="display:inline;">Created 2012-2013 for BPA.</p></li>
<li><a href="Credits.html">Credits</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
the weatherLayer requires the weather-library which is not loaded by default.