From a19b738c26c6e8d67b59a9815abd6115c558a11a Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Thu, 27 Sep 2018 14:48:59 -0400
Subject: [PATCH] added comments

---
 src/pages/Map.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/Map.js b/src/pages/Map.js
index 33fc6f8..4dd4178 100644
--- a/src/pages/Map.js
+++ b/src/pages/Map.js
@@ -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)
\ No newline at end of file