added sighting detail map

This commit is contained in:
Al Duncanson 2018-10-26 17:43:09 -04:00
parent 66fb1fc6f1
commit 49eaa2a4f4
2 changed files with 40 additions and 0 deletions

View File

@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import Disqus from 'disqus-react'; import Disqus from 'disqus-react';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
import SightingDetailMap from './SightingDetailMap';
class SightingDetail extends Component { class SightingDetail extends Component {
@ -21,6 +22,7 @@ class SightingDetail extends Component {
<p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p> <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>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
<p>{`${this.props.detail.desc}`}</p> <p>{`${this.props.detail.desc}`}</p>
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng}/>
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} /> <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
</Fragment> </Fragment>

View File

@ -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)