diff --git a/package-lock.json b/package-lock.json
index 39f42a1..78cf340 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,11 +19,6 @@
}
}
},
- "@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",
@@ -4669,22 +4664,10 @@
"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="
- }
- }
+ "google-maps-react": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.2.tgz",
+ "integrity": "sha512-6cYauGwt22haDUrWxKQ6yoNOqjiuxHo8YYcmb+aBvNICokdXmZOUB6Ah4vD5VexMVlrwP2PFqA/D8sHpEB52KA=="
},
"got": {
"version": "6.7.1",
@@ -9719,11 +9702,6 @@
"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",
diff --git a/package.json b/package.json
index c7c5f72..7993437 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@material-ui/core": "^3.1.0",
+ "google-maps-react": "^2.0.2",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-router": "^4.3.1",
diff --git a/public/index.html b/public/index.html
index 4b4d08c..52bcf5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,7 +20,6 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
-
React App
diff --git a/src/pages/Map.js b/src/pages/Map.js
index 2722d33..33fc6f8 100644
--- a/src/pages/Map.js
+++ b/src/pages/Map.js
@@ -1,13 +1,15 @@
import React, { Component } from 'react';
-import GoogleMapReact from 'google-map-react';
+import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+import Typography from '@material-ui/core/Typography';
-const styles = ({
- map: {
- height: '92vh'
- }
-});
+const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
-export default class Map extends Component {
+const style = {
+ width: '100%',
+ height: '100%'
+}
+
+export class MapContainer extends Component {
getLocation = () => {
if (navigator.geolocation) {
@@ -25,8 +27,8 @@ export default class Map extends Component {
// Grand Rapids, Michigan
this.setState({
myLatLng: {
- lat: 42.96,
- lng: 85.66
+ lat: 42.9634,
+ lng: 85.6681
}
}
);
@@ -37,26 +39,71 @@ export default class Map extends Component {
this.getLocation();
}
- state = {
- myLatLng: {
- lat: 42.96,
- lng: 85.66
+ onMarkerClick = (props, marker) => {
+ this.setState({
+ selectedPlace: props,
+ activeMarker: marker,
+ showingInfoWindow: true
+ });
+ }
+
+ onMapClick = () => {
+ if (this.state.showingInfoWindow) {
+ this.setState({
+ showingInfoWindow: false,
+ activeMarker: null
+ });
}
}
- static defaultProps = {
- zoom: 15
+ state = {
+ myLatLng: {
+ lat: 42.9634,
+ lng: 85.6681
+ },
+ showingInfoWindow: false,
+ activeMarker: {},
+ selectedPlace: {}
}
render() {
return (
-
-
-
-
+
);
}
-}
\ No newline at end of file
+}
+
+export default GoogleApiWrapper({
+ apiKey: (API_KEY)
+})(MapContainer)
\ No newline at end of file