added google-map-react component, added geolocation

package-lock.json

@@ -19,6 +19,11 @@
         }
       }
     },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+    },
     "@material-ui/core": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.0.tgz",
@@ -4121,13 +4126,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4140,18 +4143,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4254,8 +4254,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4265,7 +4264,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4278,7 +4276,6 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4378,8 +4375,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4389,7 +4385,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4495,7 +4490,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4675,6 +4669,23 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "google-map-react": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-1.0.8.tgz",
+      "integrity": "sha512-M1UIXrxUhwMjNiUkw9DiVSO0fh7vZOxgGR02grzPOu4S47sYV25oeHcsK32rvGuNlBwpHHS+T9AV4aiRuKNXuw==",
+      "requires": {
+        "@mapbox/point-geometry": "^0.1.0",
+        "eventemitter3": "^1.1.0",
+        "scriptjs": "^2.5.7"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
+          "integrity": "sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg="
+        }
+      }
+    },
     "got": {
       "version": "6.7.1",
       "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
@@ -9708,6 +9719,11 @@
         "ajv": "^5.0.0"
       }
     },
+    "scriptjs": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.8.tgz",
+      "integrity": "sha1-0MQ5VcLmutM7bk7fe1O4llqnyl8="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

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>
+            <div className='google-map' style={ styles.map }>
-                Map
+                <GoogleMapReact
-            </Typography>
+                    initialCenter={ this.state.myLatLng }
+                    center={ this.state.myLatLng }
+                    defaultZoom={ this.props.zoom }>
+                </GoogleMapReact>
+            </div>
         );
     }
 }
-
-export default Map;