added google-map-react component, added geolocation

src/components/Main.js

@@ -40,27 +40,27 @@ class SimpleTabs extends React.Component {
     };
 
     render() {
-    const { classes } = this.props;
-    const { value } = this.state;
+        const { classes } = this.props;
+        const { value } = this.state;
 
-    return (
-    <div className={classes.root}>
-        <AppBar position="static">
-            <Tabs value={value} onChange={this.handleChange} centered>
-                <Tab label="Home" />
-                <Tab label="Sightings" />
-                <Tab label="Trail-Cam Quiz" />
-                <Tab label="View Map" />
-                <Tab label="Marten Info" />
-            </Tabs>
-        </AppBar>
-        {value === 0 && <Home/>}
-        {value === 1 && <Sighting/>}
-        {value === 2 && <Quiz/>}
-        {value === 3 && <Map/>}
-        {value === 4 && <Info/>}
-    </div>
-    );
+        return (
+        <div className={classes.root}>
+            <AppBar position="static">
+                <Tabs value={value} onChange={this.handleChange} centered>
+                    <Tab label="Home" />
+                    <Tab label="Sightings" />
+                    <Tab label="Trail-Cam Quiz" />
+                    <Tab label="View Map" />
+                    <Tab label="Marten Info" />
+                </Tabs>
+            </AppBar>
+            {value === 0 && <Home/>}
+            {value === 1 && <Sighting/>}
+            {value === 2 && <Quiz/>}
+            {value === 3 && <Map/>}
+            {value === 4 && <Info/>}
+        </div>
+        );
     }
 }
 

src/pages/Map.js

@@ -1,14 +1,62 @@
 import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
+import GoogleMapReact from 'google-map-react';
+
+const styles = ({
+    map: {
+        height: '92vh'
+    }
+});
+
+export default class Map extends Component {
+
+    getLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.setState({
+                        myLatLng: {
+                            lat: position.coords.latitude,
+                            lng: position.coords.longitude
+                        }
+                    }
+                );
+            })
+        } else {
+            // If browser doesn't support geolocation, center map on 
+            // Grand Rapids, Michigan
+            this.setState({
+                    myLatLng: {
+                        lat: 42.96,
+                        lng: 85.66
+                    }
+                }
+            );
+        }
+    }
+
+    componentDidMount() {
+        this.getLocation();
+    }
+
+    state = {
+        myLatLng: {
+            lat: 42.96,
+            lng: 85.66
+        }
+    }
+
+    static defaultProps = {
+        zoom: 15
+    }
 
-class Map extends Component {
     render() {
         return (
-            <Typography variant='display1' align='center' gutterBottom>
-                Map
-            </Typography>
+            <div className='google-map' style={ styles.map }>
+                <GoogleMapReact
+                    initialCenter={ this.state.myLatLng }
+                    center={ this.state.myLatLng }
+                    defaultZoom={ this.props.zoom }>
+                </GoogleMapReact>
+            </div>
         );
     }
-}
-
-export default Map;
+}