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