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 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)