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 { 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)
|
Loading…
Reference in New Issue