added comments
This commit is contained in:
parent
477ba66608
commit
a19b738c26
|
@ -2,8 +2,10 @@ import React, { Component } from 'react';
|
|||
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
|
||||
// Google Maps API Key
|
||||
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
||||
|
||||
// Map container styles
|
||||
const style = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
|
@ -11,6 +13,7 @@ const style = {
|
|||
|
||||
export class MapContainer extends Component {
|
||||
|
||||
// Get the user's location using Google's geolocation
|
||||
getLocation = () => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition((position) => {
|
||||
|
@ -23,8 +26,8 @@ export class MapContainer extends Component {
|
|||
);
|
||||
})
|
||||
} else {
|
||||
// If browser doesn't support geolocation, center map on
|
||||
// Grand Rapids, Michigan
|
||||
// If browser doesn't support geolocation or if user does not allow it,
|
||||
// center map on Grand Rapids, Michigan
|
||||
this.setState({
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
|
@ -35,10 +38,13 @@ export class MapContainer extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// When the component has mounted to the DOM, get the user's location
|
||||
componentDidMount() {
|
||||
this.getLocation();
|
||||
}
|
||||
|
||||
// When the user clicks on a marker, pass the props related to that marker
|
||||
// and show the related info window
|
||||
onMarkerClick = (props, marker) => {
|
||||
this.setState({
|
||||
selectedPlace: props,
|
||||
|
@ -47,6 +53,8 @@ export class MapContainer extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
// When the user clicks on the map, if a info window is visible then close it
|
||||
// and 'unactive' that marker
|
||||
onMapClick = () => {
|
||||
if (this.state.showingInfoWindow) {
|
||||
this.setState({
|
||||
|
@ -56,6 +64,8 @@ export class MapContainer extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// Set the state of the component to contain user coordinates and initial
|
||||
// marker and info window information
|
||||
state = {
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
|
@ -68,6 +78,7 @@ export class MapContainer extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<Map
|
||||
style={ style }
|
||||
google={ this.props.google }
|
||||
|
@ -104,6 +115,7 @@ export class MapContainer extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// Send the Google Map API Key with the MapContainer component
|
||||
export default GoogleApiWrapper({
|
||||
apiKey: (API_KEY)
|
||||
})(MapContainer)
|
Loading…
Reference in New Issue