-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhere.html
81 lines (72 loc) · 2.92 KB
/
where.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Alaska Energy Data Map</title>
<link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<!-- If you are in China, you may need to use theis site for the Google Maps code
<script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBHqpFDS576LmjEucuFnvRPwcYhoTxE_XM"></script>
<!-- Data Source -->
<script src="where.js"></script>
<script>
function initialize() {
//alert("To see the title of a marker, hover over the marker but don't click.");
var myLatlng = new google.maps.LatLng(64,-150)
var mapOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
i = 0;
var markers = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
for ( pos in myData ) {
i = i + 1;
var row = myData[pos];
window.console && console.log(row);
// if ( i < 3 ) { alert(row); }
var newLatlng = new google.maps.LatLng(row[0], row[1]);
var marker = new google.maps.Marker({
position: newLatlng,
map: map,
title: row[2]
});
markers.push(marker);
infoContent = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">' + row[2] + '</h1>' +
'<div id="bodyContent">'+
'<b>Population: </b>'+ row[3] + '<br>' +
'<b>Residential Rate: </b>$'+ row[4] + '/kWh<br>' +
'<b>PCE Rate: </b> $'+ row[5] + '/kWh<br>' +
'</div>'+
'</div>';
bindInfoWindow(marker, map, infowindow, infoContent);
}
}
function bindInfoWindow(marker, map, infowindow, description) {
marker.addListener('click', function() {
infowindow.setContent(description);
infowindow.open(map, this);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 700px"></div>
<p><b>About this Map</b></p>
<p>
This map is based on code from
<a href="http://www.pythonlearn.com">www.pythonlearn.com</a>. <br/>
The map is meant for educational purposes only and is made in partial completion of a Python course programming project.
The code developed retrieves information from the sites provided by the
<a href="http://akenergydata.alaska.edu">Alaska Energy Data Gateway</a>. <br/>
Please send any complaints, or comments to marc dot mueller-stoffels at gmail dot com.
</p>
</body>
</html>