nealf/api_presentation_final.html

## api_presentation_final.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
      var map;
      var geocoder;
      var infowindow;
      function initMap() {
        infowindow = new google.maps.InfoWindow({
          content: '<div id="popupChart" style="width:600px; height:400px"></div>'
        });
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.62, lng: -79.5},
          zoom: 8
        });
        geocodeLocation('Blacksburg, VA');
        geocodeLocation('Bristol, VA');
        geocodeLocation('Norfolk, VA');
        geocodeLocation('Fredericksburg, VA');

      }

      function geocodeLocation(place) {
          geocoder.geocode( { 'address': place}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location
              });

              marker.addListener('click', function() {
                getForecastData(marker);
              });
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });
      }

      function getForecastData(marker) {
        var forecastUrl = "https://api.forecast.io/forecast/01f55b562d2e677f517c3a2cab8bebc4/";
        forecastUrl += marker.getPosition().toUrlValue();

        $.get(forecastUrl, function(results) {
          var hourlyData = results.hourly.data;
          var times = [];
          var temps = [];
          var winds = [];
          $.each(hourlyData, function(index, value) {
            var theTime = new Date(hourlyData[index]["time"] * 1000);
            times.push(theTime);
            temps.push(hourlyData[index]["temperature"]);
            winds.push(hourlyData[index]["windSpeed"]);
          });
          var data = [
            {
              x: times,
              y: temps,
              name: 'Temperature',
              type: 'scatter'
            },
            {
              x: times,
              y: winds,
              name: 'Windspeed',
              yaxis: 'y2',
              type: 'scatter'
            }
          ];
          var layout = {
            title:'48 Hour Forecast',
            yaxis: {
              title: '&#176;F',
              titlefont: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#7f7f7f'
              }
            },yaxis2: {
              title: 'MPH',
              titlefont: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#7f7f7f'
              },
              overlaying: 'y',
              side: 'right'
            },xaxis: {
              title: 'Time',
              titlefont: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#7f7f7f'
              }
            }
          };

          infowindow.open(map, marker);
          infowindow.addListener('domready', function() {
            Plotly.newPlot('popupChart', data, layout);
          });

        },"jsonp");
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLmMSoMXTXPtLhomE1KFHBshie7Y05SUw&callback=initMap"
    async defer></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Map</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map {
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<script>
	var map;
	var geocoder;
	var infowindow;
	function initMap() {
	infowindow = new google.maps.InfoWindow({
	content: '<div id="popupChart" style="width:600px; height:400px"></div>'
	});
	geocoder = new google.maps.Geocoder();
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 37.62, lng: -79.5},
	zoom: 8
	});
	geocodeLocation('Blacksburg, VA');
	geocodeLocation('Bristol, VA');
	geocodeLocation('Norfolk, VA');
	geocodeLocation('Fredericksburg, VA');

	}

	function geocodeLocation(place) {
	geocoder.geocode( { 'address': place}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location
	});

	marker.addListener('click', function() {
	getForecastData(marker);
	});
	} else {
	alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}

	function getForecastData(marker) {
	var forecastUrl = "https://api.forecast.io/forecast/01f55b562d2e677f517c3a2cab8bebc4/";
	forecastUrl += marker.getPosition().toUrlValue();

	$.get(forecastUrl, function(results) {
	var hourlyData = results.hourly.data;
	var times = [];
	var temps = [];
	var winds = [];
	$.each(hourlyData, function(index, value) {
	var theTime = new Date(hourlyData[index]["time"] * 1000);
	times.push(theTime);
	temps.push(hourlyData[index]["temperature"]);
	winds.push(hourlyData[index]["windSpeed"]);
	});
	var data = [
	{
	x: times,
	y: temps,
	name: 'Temperature',
	type: 'scatter'
	},
	{
	x: times,
	y: winds,
	name: 'Windspeed',
	yaxis: 'y2',
	type: 'scatter'
	}
	];
	var layout = {
	title:'48 Hour Forecast',
	yaxis: {
	title: '°F',
	titlefont: {
	family: 'Courier New, monospace',
	size: 18,
	color: '#7f7f7f'
	}
	},yaxis2: {
	title: 'MPH',
	titlefont: {
	family: 'Courier New, monospace',
	size: 18,
	color: '#7f7f7f'
	},
	overlaying: 'y',
	side: 'right'
	},xaxis: {
	title: 'Time',
	titlefont: {
	family: 'Courier New, monospace',
	size: 18,
	color: '#7f7f7f'
	}
	}
	};

	infowindow.open(map, marker);
	infowindow.addListener('domready', function() {
	Plotly.newPlot('popupChart', data, layout);
	});

	},"jsonp");
	}

	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLmMSoMXTXPtLhomE1KFHBshie7Y05SUw&callback=initMap"
	async defer></script>
	</body>
	</html>