added comments

This commit is contained in:
Al Duncanson 2018-09-27 14:48:59 -04:00
parent 477ba66608
commit a19b738c26
1 changed files with 14 additions and 2 deletions

View File

@ -2,8 +2,10 @@ import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react'; import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
// Google Maps API Key
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM'; const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
// Map container styles
const style = { const style = {
width: '100%', width: '100%',
height: '100%' height: '100%'
@ -11,6 +13,7 @@ const style = {
export class MapContainer extends Component { export class MapContainer extends Component {
// Get the user's location using Google's geolocation
getLocation = () => { getLocation = () => {
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => { navigator.geolocation.getCurrentPosition((position) => {
@ -23,8 +26,8 @@ export class MapContainer extends Component {
); );
}) })
} else { } else {
// If browser doesn't support geolocation, center map on // If browser doesn't support geolocation or if user does not allow it,
// Grand Rapids, Michigan // center map on Grand Rapids, Michigan
this.setState({ this.setState({
myLatLng: { myLatLng: {
lat: 42.9634, 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() { componentDidMount() {
this.getLocation(); 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) => { onMarkerClick = (props, marker) => {
this.setState({ this.setState({
selectedPlace: props, 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 = () => { onMapClick = () => {
if (this.state.showingInfoWindow) { if (this.state.showingInfoWindow) {
this.setState({ 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 = { state = {
myLatLng: { myLatLng: {
lat: 42.9634, lat: 42.9634,
@ -68,6 +78,7 @@ export class MapContainer extends Component {
render() { render() {
return ( return (
// Render the Google Map, Marker, and InfoWindow components
<Map <Map
style={ style } style={ style }
google={ this.props.google } 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({ export default GoogleApiWrapper({
apiKey: (API_KEY) apiKey: (API_KEY)
})(MapContainer) })(MapContainer)