A brief demonstration of using several APIs

api_presentation_changes.js

//Change to Virginia for starting location
...
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.62, lng: -79.5},
  zoom: 8
});
...


//Create a geocoder
...
var map;
var geocoder;
...
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
...


//Add a geocoding function
function initMap() {
    ...
}
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
      });
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
...


//Add some places
...
map = new google.maps.Map(
  ...
);
geocodeLocation('Blacksburg, VA');
geocodeLocation('Bristol, VA');
geocodeLocation('Norfolk, VA');
geocodeLocation('Fredericksburg, VA');
...


//Create an infowindow
...
  position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
//Listen for a click
marker.addListener('click', function() {
  infowindow.open(map, marker);
});
...



//Get forecast.io data
//Create a function to call on CLICK event
...
function geocodeLocation(place) {...}
function getForecastData(marker) {

}
...


//Move the infowindow code into the new function and then call the new function
...
marker.addListener('click', function() {
  getForecastData(marker);
});
...


//Add jquery
...
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
...


//Set the base forecast.io url
function getForecastData(marker) {
  var forecastUrl = "https://api.forecast.io/forecast/01f55b562d2e677f517c3a2cab8bebc4/";
  //Explore the API documentation to find out how to get the lat/lng in the right format: "lat,lng"
  forecastUrl += marker.getPosition().toUrlValue();
  ...
  

//Use jquery to call our forecast url and get data back
...
forecastUrl += marker.getPosition().toUrlValue();
$.get(forecastUrl, function(results) {

},"jsonp");
...


//Change the results to a string so we can see it's working and move the infowindow code into the callback from $.get
...
$.get(forecastUrl, function(results) {
  var infowindow = new google.maps.InfoWindow({
    content: JSON.stringify(results)
  });
  infowindow.open(map, marker);
},"jsonp");
...


//Too many infowindows if you click on multiple markers, lets change that
//Move infowindow declaration up to the start, and go ahead and change the content in preperation for a chart later
...
function initMap() {
  infowindow = new google.maps.InfoWindow({
    content: '<div id="popupChart" style="width:600px; height:400px"></div>'
  });
  geocoder = new google.maps.Geocoder();
  ...


//Add Plotly JS
...
<script src="https://code.jquery.com/jquery-2.2.2.min.js" ...
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
  ...
  

//Start with just their demo data and chart
...
$.get(forecastUrl, function(results) {
  var data = [
    {
      x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
      y: [1, 3, 6],
      type: 'scatter'
    }
  ];
  Plotly.newPlot('popupChart', data);
  infowindow.open(map, marker);
  ...
  

//You might not see your chart here because of race conditions
//The infowindow hasn't been created yet, so the chart has nowhere to go!
//So, we'll wait until the infowindow is good and ready, and then we'll tell plotly to do its thing
...
var data = [
  {
    x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
    y: [1, 3, 6],
    type: 'scatter'
  }
];
infowindow.open(map, marker);

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


//Now use the actual forecast data
...
$.get(forecastUrl, function(results) {
  var hourlyData = results.hourly.data;
  var times = [];
  var temps = [];
  $.each(hourlyData, function(index, value) {
    var theTime = new Date(hourlyData[index]["time"] * 1000);
    times.push(theTime);
    temps.push(hourlyData[index]["temperature"]);
  });
  var data = [
    {
      x: times,
      y: temps,
      type: 'scatter',
      name: 'Temperature'
    }
  ];
  infowindow.open(map, marker);
  ...
  

//Add a title and axis labels
var layout = {
  title:'48 Hour Temperature Forecast',
  yaxis: {
    title: '&#176;F',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },xaxis: {
    title: 'Time',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  }
};

Plotly.newPlot('popupChart', data, layout);

//Let's add windspeed as well
winds.push(hourlyData[index]["windSpeed"]);

,
{
  x: times,
  y: winds,
  name: 'Windspeed',
  yaxis: 'y2',
  type: 'scatter'
}
            
,yaxis2: {
  title: 'MPH',
  titlefont: {
    family: 'Courier New, monospace',
    size: 18,
    color: '#7f7f7f'
  },
  overlaying: 'y',
  side: 'right'
}