diff --git a/src/App.css b/src/App.css index 4e41b69..09e6b2b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,7 @@ body { margin: 0; +} + +header + div > div { + height: 92% !important; } \ No newline at end of file diff --git a/src/images/marten-icon.png b/src/images/marten-icon.png new file mode 100644 index 0000000..20e396d Binary files /dev/null and b/src/images/marten-icon.png differ diff --git a/src/images/tire-icon.png b/src/images/tire-icon.png new file mode 100644 index 0000000..ae18fac Binary files /dev/null and b/src/images/tire-icon.png differ diff --git a/src/pages/Map.js b/src/pages/Map.js index 4dd4178..97eaede 100644 --- a/src/pages/Map.js +++ b/src/pages/Map.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react'; import Typography from '@material-ui/core/Typography'; @@ -55,13 +55,20 @@ 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({ + onMapClick = (props, map, e) => { + if (this.state.showingInfoWindow) { + this.setState({ showingInfoWindow: false, activeMarker: null }); } + + let lat = e.latLng.lat(); + let lng = e.latLng.lng(); + console.log(` + latitude: ${lat} + longitude: ${lng} + `); } // Set the state of the component to contain user coordinates and initial @@ -77,38 +84,53 @@ export class MapContainer extends Component { } render() { + + // TODO: This line is used by the custom marker icon + //const { google } = this.props; + return ( // Render the Google Map, Marker, and InfoWindow components + - - { this.state.selectedPlace.title } - - - { this.state.selectedPlace.name } - + + + + { this.state.selectedPlace.title } + + + { this.state.selectedPlace.name } + + + );