From 49eaa2a4f453994a8479bfbeb3be89a3fa6cadec Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Fri, 26 Oct 2018 17:43:09 -0400
Subject: [PATCH] added sighting detail map

---
 src/components/SightingDetail.js    |  2 ++
 src/components/SightingDetailMap.js | 38 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/components/SightingDetailMap.js

diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js
index 47dee0b..97dc9ac 100644
--- a/src/components/SightingDetail.js
+++ b/src/components/SightingDetail.js
@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import Disqus from 'disqus-react';
 import Divider from '@material-ui/core/Divider';
+import SightingDetailMap from './SightingDetailMap';
 
 class SightingDetail extends Component {
 
@@ -21,6 +22,7 @@ class SightingDetail extends Component {
                 <p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
                 <p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
                 <p>{`${this.props.detail.desc}`}</p>
+                <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng}/>
 
                 <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
             </Fragment>
diff --git a/src/components/SightingDetailMap.js b/src/components/SightingDetailMap.js
new file mode 100644
index 0000000..aaa4c50
--- /dev/null
+++ b/src/components/SightingDetailMap.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
+
+// Google Maps API Key
+const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
+
+// Map container styles
+const mapStyles = {
+    width: '100%',
+    height: '100%'
+}
+
+export class MapContainer extends Component {
+
+    render() {
+        return (
+            // Render the Google Map, Marker, and InfoWindow components
+            <div className = "sighting-detail-google-map-container">
+                <Map
+                    style = { mapStyles }
+                    google = { this.props.google }
+                    initialCenter = {{ lat: this.props.lat, lng: this.props.lng }}
+                    center = {{ lat: this.props.lat, lng: this.props.lng }}
+                    defaultZoom = { 15 }>
+
+                    <Marker 
+                        position = {{ lat: this.props.lat, lng: this.props.lng }}
+                    />
+                </Map>
+            </div>
+        );
+    }
+}
+
+// Send the Google Map API Key with the MapContainer component
+export default GoogleApiWrapper({
+    apiKey: (API_KEY)
+})(MapContainer)
\ No newline at end of file