Added Google maps to the table for the city searched for.

Author: rdm100

images/2nd screenshot showing satellite view working in maps.png

@@ -11,3 +11,6 @@
   </body>
   <script src="/bundle.js"></script>
 </html>
+
+
+<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyChOgesyKbKNt04mvzBReNytSKn9bYPDC8"></script> -->

images/screenshot before search term has been entered.png

@@ -1,3 +1,6 @@
+//using axios instead of .fetch() you can cut out the middle step of passing the results of the http request to the .json() method. 
+// Axios just returns the data object you would expect.
+//It also handles errors better than .fetch() where the .catch() block does not run when an incorrect URL is entered
 import axios from 'axios';
 
 const API_KEY =  '07a669a92354520dad8a3e91046461b4';

images/screenshot showing satellite view is working on maps.png

@@ -9,7 +9,7 @@ function average(data){
 export default (props) => {
 	return(
 		<div>
-			<Sparklines svgHeight={120} svgWidth={180} data={props.data}>
+			<Sparklines svgHeight={150} svgWidth={180} data={props.data}>
 				<SparklinesLine color={props.color} />
 				<SparklinesReferenceLine type="avg"/>
 			</Sparklines>

images/screenshot when 2nd search term is entered Las Vegas.png

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+
+export default class GoogleMap extends Component{
+	componentDidMount() {
+		// const google = window.google;
+		new google.maps.Map(this.refs.map, {
+			zoom: 12,
+			center: {
+				lat: this.props.lat,
+				lng: this.props.lon
+			}
+		});
+	}
+
+	render() {
+		return(
+			// to reference this element after it has been rendered to the page use this.refs.map
+			<div ref="map" />
+		);
+	}
+}
+