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

updated map component, wrapped with api key, added markers/info windows

This commit is contained in:
Al Duncanson 2018-09-27 14:28:49 -04:00
parent aeae021f2b
commit 477ba66608
4 changed files with 75 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

@ -19,11 +19,6 @@
} }
} }
}, },
"@mapbox/point-geometry": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
},
"@material-ui/core": { "@material-ui/core": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.0.tgz", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.0.tgz",
@ -4669,22 +4664,10 @@
"pinkie-promise": "^2.0.0" "pinkie-promise": "^2.0.0"
} }
}, },
"google-map-react": { "google-maps-react": {
"version": "1.0.8", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-1.0.8.tgz", "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.2.tgz",
"integrity": "sha512-M1UIXrxUhwMjNiUkw9DiVSO0fh7vZOxgGR02grzPOu4S47sYV25oeHcsK32rvGuNlBwpHHS+T9AV4aiRuKNXuw==", "integrity": "sha512-6cYauGwt22haDUrWxKQ6yoNOqjiuxHo8YYcmb+aBvNICokdXmZOUB6Ah4vD5VexMVlrwP2PFqA/D8sHpEB52KA=="
"requires": {
"@mapbox/point-geometry": "^0.1.0",
"eventemitter3": "^1.1.0",
"scriptjs": "^2.5.7"
},
"dependencies": {
"eventemitter3": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-1.2.0.tgz",
"integrity": "sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg="
}
}
}, },
"got": { "got": {
"version": "6.7.1", "version": "6.7.1",
@ -9719,11 +9702,6 @@
"ajv": "^5.0.0" "ajv": "^5.0.0"
} }
}, },
"scriptjs": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.8.tgz",
"integrity": "sha1-0MQ5VcLmutM7bk7fe1O4llqnyl8="
},
"select-hose": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

1
package.json
View File

@ -4,6 +4,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^3.1.0", "@material-ui/core": "^3.1.0",
"google-maps-react": "^2.0.2",
"react": "^16.5.1", "react": "^16.5.1",
"react-dom": "^16.5.1", "react-dom": "^16.5.1",
"react-router": "^4.3.1", "react-router": "^4.3.1",

1
public/index.html
View File

@ -20,7 +20,6 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM" async defer></script>
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

91
src/pages/Map.js
View File

@ -1,13 +1,15 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react'; import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import Typography from '@material-ui/core/Typography';
const styles = ({ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
map: {
height: '92vh'
}
});
export default class Map extends Component { const style = {
width: '100%',
height: '100%'
}
export class MapContainer extends Component {
getLocation = () => { getLocation = () => {
if (navigator.geolocation) { if (navigator.geolocation) {
@ -25,8 +27,8 @@ export default class Map extends Component {
// Grand Rapids, Michigan // Grand Rapids, Michigan
this.setState({ this.setState({
myLatLng: { myLatLng: {
lat: 42.96, lat: 42.9634,
lng: 85.66 lng: 85.6681
} }
} }
); );
@ -37,26 +39,71 @@ export default class Map extends Component {
this.getLocation(); this.getLocation();
} }
state = { onMarkerClick = (props, marker) => {
myLatLng: { this.setState({
lat: 42.96, selectedPlace: props,
lng: 85.66 activeMarker: marker,
showingInfoWindow: true
});
}
onMapClick = () => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
} }
} }
static defaultProps = { state = {
zoom: 15 myLatLng: {
lat: 42.9634,
lng: 85.6681
},
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
} }
render() { render() {
return ( return (
<div className='google-map' style={ styles.map }> <Map
<GoogleMapReact style={ style }
initialCenter={ this.state.myLatLng } google={ this.props.google }
center={ this.state.myLatLng } initialCenter={ this.state.myLatLng }
defaultZoom={ this.props.zoom }> center={ this.state.myLatLng }
</GoogleMapReact> defaultZoom={ 15 }
</div> onClick = { this.onMapClick } >
<Marker
position={ this.state.myLatLng }
onClick = { this.onMarkerClick }
title = { 'Title 1!' }
name = { 'Name 1!' }
/>
<Marker
position={{ lat: 46.5089994, lng: -122.8543421 }}
onClick = { this.onMarkerClick }
title = { 'Title 2!' }
name = { 'Name 2!' }
/>
<InfoWindow
marker = { this.state.activeMarker }
visible = { this.state.showingInfoWindow } >
<Typography variant="display1" gutterBottom>
{ this.state.selectedPlace.title }
</Typography>
<Typography variant="subheading" gutterBottom>
{ this.state.selectedPlace.name }
</Typography>
</InfoWindow>
</Map>
); );
} }
} }
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)