From 477ba6660828f702880305435c14348e070734ab Mon Sep 17 00:00:00 2001 From: Al Duncanson Date: Thu, 27 Sep 2018 14:28:49 -0400 Subject: [PATCH] updated map component, wrapped with api key, added markers/info windows --- package-lock.json | 30 ++------------- package.json | 1 + public/index.html | 1 - src/pages/Map.js | 93 +++++++++++++++++++++++++++++++++++------------ 4 files changed, 75 insertions(+), 50 deletions(-) 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 ( -
- - -
+ + + + + + + + { this.state.selectedPlace.title } + + + { this.state.selectedPlace.name } + + + ); } -} \ No newline at end of file +} + +export default GoogleApiWrapper({ + apiKey: (API_KEY) +})(MapContainer) \ No newline at end of file