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