added sighting detail map
This commit is contained in:
parent
66fb1fc6f1
commit
49eaa2a4f4
|
@ -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>
|
||||
|
|
|
@ -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)
|
Loading…
Reference in New Issue