updated map component, wrapped with api key, added markers/info windows
This commit is contained in:
Al Duncanson
parent
aeae021f2b
commit
477ba66608
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 }
|
||||||
|
google={ this.props.google }
|
||||||
initialCenter={ this.state.myLatLng }
|
initialCenter={ this.state.myLatLng }
|
||||||
center={ this.state.myLatLng }
|
center={ this.state.myLatLng }
|
||||||
defaultZoom={ this.props.zoom }>
|
defaultZoom={ 15 }
|
||||||
</GoogleMapReact>
|
onClick = { this.onMapClick } >
|
||||||
</div>
|
|
||||||
|
<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)
|
||||||
Loading…
Reference in New Issue