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 {
{`When: ${this.props.detail.date}, ${this.props.detail.time}`}
{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}
{`${this.props.detail.desc}`}
+
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
+
+
+
+ );
+ }
+}
+
+// Send the Google Map API Key with the MapContainer component
+export default GoogleApiWrapper({
+ apiKey: (API_KEY)
+})(MapContainer)
\ No newline at end of file