GVSU/marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

added map

Browse Source
This commit is contained in:
Al Duncanson
2018-09-28 15:21:29 -04:00
parent ee0404a82b
commit 603156def7
3 changed files with 764 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@@ -2,6 +2,6 @@ body {
margin: 0;
}
header + div > div {
.google-map-container > div {
height: 92% !important;
}

93
src/pages/Map.js
View File

@@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
// Map container styles
const style = {
const mapStyles = {
width: '100%',
height: '100%'
}
@@ -90,49 +90,64 @@ export class MapContainer extends Component {
return (
// Render the Google Map, Marker, and InfoWindow components
<Map
style = { style }
google = { this.props.google }
initialCenter = { this.state.myLatLng }
center = { this.state.myLatLng }
defaultZoom = { 15 }
onClick = { this.onMapClick } >
<div className = "google-map-container">
<Map
style = { mapStyles }
google = { this.props.google }
initialCenter = { this.state.myLatLng }
center = { this.state.myLatLng }
defaultZoom = { 15 }
onClick = { this.onMapClick } >
<Marker
position = { this.state.myLatLng }
onClick = { this.onMarkerClick }
title = { 'Sighting Type: Roadkill' }
name = { 'blah blah blah' }
// FIXME: fix custom icon
// icon={{
// url: "../images/marten-icon.png",
// anchor: new google.maps.Point(32,32),
// scaledSize: new google.maps.Size(64,64)
// }}
/>
<Marker
position = { this.state.myLatLng }
onClick = { this.onMarkerClick }
title = { 'Marker One' }
name = { 'blah blah blah' }
// FIXME: fix custom icon
// icon={{
// url: "../images/marten-icon.png",
// anchor: new google.maps.Point(32,32),
// scaledSize: new google.maps.Size(64,64)
// }}
/>
<Marker
position = {{ lat: 46.5089994, lng: -122.8543421 }}
onClick = { this.onMarkerClick }
title = { 'Sighting Type: Alive' }
name = { 'blah' }
/>
<Marker
position = {{ lat: 42.755011162859724, lng: -84.57320350394787 }}
onClick = { this.onMarkerClick }
title = { 'Marker Two' }
name = { 'yay another marker' }
/>
<InfoWindow
marker = { this.state.activeMarker }
visible = { this.state.showingInfoWindow } >
<Marker
position = {{ lat: 43.548480610783194, lng: -84.28206580863537 }}
onClick = { this.onMarkerClick }
title = { 'Marker Three' }
name = { 'three markers :D' }
/>
<Fragment>
<Typography variant = "display1" gutterBottom>
{ this.state.selectedPlace.title }
</Typography>
<Typography variant = "subheading" gutterBottom>
{ this.state.selectedPlace.name }
</Typography>
</Fragment>
<Marker
position = {{ lat: 42.24878276258738, lng: -85.72127479301037 }}
onClick = { this.onMarkerClick }
title = { 'Marker Four' }
name = { 'YEET' }
/>
</InfoWindow>
</Map>
<InfoWindow
marker = { this.state.activeMarker }
visible = { this.state.showingInfoWindow } >
<Fragment>
<Typography variant = "display1" gutterBottom>
{ this.state.selectedPlace.title }
</Typography>
<Typography variant = "subheading" gutterBottom>
{ this.state.selectedPlace.name }
</Typography>
</Fragment>
</InfoWindow>
</Map>
</div>
);
}
}