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