added images, added styles, record lat/lng onClick()

src/App.css

@@ -1,3 +1,7 @@
 body {
     margin: 0;
 }
+
+header + div > div {
+    height: 92% !important;
+}

src/pages/Map.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
 import Typography from '@material-ui/core/Typography';
 
@@ -55,13 +55,20 @@ export class MapContainer extends Component {
     
     // When the user clicks on the map, if a info window is visible then close it
     // and 'unactive' that marker
-    onMapClick = () => {
+    onMapClick = (props, map, e) => {
         if (this.state.showingInfoWindow) {
             this.setState({
                 showingInfoWindow: false,
                 activeMarker: null
             });
         }
+
+        let lat = e.latLng.lat();
+        let lng = e.latLng.lng();
+        console.log(`
+            latitude: ${lat}
+            longitude: ${lng}
+        `);
     }
 
     // Set the state of the component to contain user coordinates and initial 
@@ -77,6 +84,10 @@ export class MapContainer extends Component {
     }
 
     render() {
+
+        // TODO: This line is used by the custom marker icon
+        //const { google } = this.props;
+
         return (
             // Render the Google Map, Marker, and InfoWindow components
             <Map
@@ -90,25 +101,36 @@ export class MapContainer extends Component {
                 <Marker 
                     position = { this.state.myLatLng }
                     onClick = { this.onMarkerClick }
-                    title = { 'Title 1!' }
-                    name = { 'Name 1!' } 
+                    title = { 'Sighting Type: Roadkill' }
+                    name = { 'blah blah blah' } 
+                    // FIXME: fix custom icon
+                    // icon={{
+                    //     url: "../images/marten-icon.png",
+                    //     anchor: new google.maps.Point(32,32),
+                    //     scaledSize: new google.maps.Size(64,64)
+                    // }}
                 />
+
                 <Marker 
                     position = {{ lat: 46.5089994, lng: -122.8543421 }}
                     onClick = { this.onMarkerClick }
-                    title = { 'Title 2!' }
-                    name = { 'Name 2!' } 
+                    title = { 'Sighting Type: Alive' }
+                    name = { 'blah' } 
                 />
 
                 <InfoWindow
                     marker = { this.state.activeMarker }
                     visible = { this.state.showingInfoWindow } >
+
+                    <Fragment>
                         <Typography variant = "display1" gutterBottom>
                             { this.state.selectedPlace.title }
                         </Typography>
                         <Typography variant = "subheading" gutterBottom>
                             { this.state.selectedPlace.name }
                         </Typography>
+                    </Fragment>
+
                 </InfoWindow>
             </Map>
         );