updated map component, wrapped with api key, added markers/info windows

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 (
-            <div className='google-map' style={ styles.map }>
-                <GoogleMapReact
-                    initialCenter={ this.state.myLatLng }
-                    center={ this.state.myLatLng }
-                    defaultZoom={ this.props.zoom }>
-                </GoogleMapReact>
-            </div>
+            <Map
+                style={ style }
+                google={ this.props.google }
+                initialCenter={ this.state.myLatLng }
+                center={ this.state.myLatLng }
+                defaultZoom={ 15 }
+                onClick = { this.onMapClick } >
+
+                <Marker 
+                    position={ this.state.myLatLng }
+                    onClick = { this.onMarkerClick }
+                    title = { 'Title 1!' }
+                    name = { 'Name 1!' } 
+                />
+                <Marker 
+                    position={{ lat: 46.5089994, lng: -122.8543421 }}
+                    onClick = { this.onMarkerClick }
+                    title = { 'Title 2!' }
+                    name = { 'Name 2!' } 
+                />
+
+                <InfoWindow
+                    marker = { this.state.activeMarker }
+                    visible = { this.state.showingInfoWindow } >
+                    <Typography variant="display1" gutterBottom>
+                        { this.state.selectedPlace.title }
+                    </Typography>
+                    <Typography variant="subheading" gutterBottom>
+                        { this.state.selectedPlace.name }
+                    </Typography>
+                </InfoWindow>
+            </Map>
         );
     }
-}
+}
+
+export default GoogleApiWrapper({
+    apiKey: (API_KEY)
+})(MapContainer)