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>
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										38
									
								
								src/components/SightingDetailMap.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										38
									
								
								src/components/SightingDetailMap.js
									
									
									
									
									
										Normal 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)
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user