Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>CS440 Test Map</title>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
- <meta charset="utf-8">
- <style>
- html,
- body {
- height: 100%;
- margin: 0;
- width: 100%;
- }
- #map {
- height: 100%;
- width: 100%;
- }
- </style>
- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
- <script>
- function initialize() {
- var jsontest = [{
- "STATION_ID":"720160",
- "NAME":"Charleston",
- "CTRY":"US",
- "STATE":"WV",
- "lat": 38.379,
- "lng": -81.591,
- "Yeartemps": [
- ['Year', 'Temps'],
- [1940, 20],
- [1945, 31],
- [1955, 42],
- [1965, 53],
- [1970, 44],
- [1975, 65],
- [1980, 56],
- [1985, 77],
- [1995, 88],
- [2007, 69.0137363729567]
- ]
- },
- {
- "STATION_ID":"720260",
- "NAME":"Morgantown",
- "CTRY":"US",
- "STATE":"WV",
- "lat": 39.643,
- "lng": -79.916,
- "Yeartemps": [
- ['Year', 'Temps'],
- [1910, 40],
- [1921, 45],
- [1932, 50],
- [1943, 55],
- [1954, 60],
- [1965, 65],
- [1976, 70],
- [1987, 75],
- [1998, 60],
- [2007, 54.0137363729567]
- ]
- }];
- (function (markerwindows) {
- var getmap,
- map,
- markers,
- windows,
- getmap = document.getElementById('map');
- map = new google.maps.Map(getmap, {
- center: new google.maps.LatLng(38.379, -81.591),
- mapTypeId: google.maps.MapTypeId.ROADMAP,
- zoom: 8
- });
- markers = [];
- windows = [];
- markerwindows.forEach(function (obj) {
- var marker,
- win;
- test = obj.Yeartemps;
- marker = new google.maps.Marker({
- position: new google.maps.LatLng(obj.lat, obj.lng),
- map: map,
- title: obj.STATION_ID
- });
- markers.push(marker);
- /*win = new google.maps.InfoWindow({
- content: obj.STATION_ID + ' ' + obj.NAME
- });
- windows.push(win);*/
- google.maps.event.addListener(marker, 'click', function() {
- drawChart(this, test);
- });
- });
- }(jsontest));
- }
- function drawChart(marker, test) {
- var data = google.visualization.arrayToDataTable(test);
- var options = {
- title: marker.title,
- hAxis: {title: 'Years'},
- vAxis: {title: 'Age'},
- legend:'none',
- trendlines: {0: {} }
- };
- var node = document.createElement('div'),
- chart = new google.visualization.ScatterChart(node);
- chart.draw(data, options);
- infoWindow.setContent(node);
- infoWindow.open(marker.getMap(),marker);
- }
- google.load('visualization', '1.0', {'packages':['corechart']});
- google.maps.event.addDomListener(window, 'load', initialize);
- </script>
- </head>
- <body>
- <div id="map"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement