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": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.0.tgz",
|
||||
|
|
@ -4669,22 +4664,10 @@
|
|||
"pinkie-promise": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"google-map-react": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-1.0.8.tgz",
|
||||
"integrity": "sha512-M1UIXrxUhwMjNiUkw9DiVSO0fh7vZOxgGR02grzPOu4S47sYV25oeHcsK32rvGuNlBwpHHS+T9AV4aiRuKNXuw==",
|
||||
"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="
|
||||
}
|
||||
}
|
||||
"google-maps-react": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.2.tgz",
|
||||
"integrity": "sha512-6cYauGwt22haDUrWxKQ6yoNOqjiuxHo8YYcmb+aBvNICokdXmZOUB6Ah4vD5VexMVlrwP2PFqA/D8sHpEB52KA=="
|
||||
},
|
||||
"got": {
|
||||
"version": "6.7.1",
|
||||
|
|
@ -9719,11 +9702,6 @@
|
|||
"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": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^3.1.0",
|
||||
"google-maps-react": "^2.0.2",
|
||||
"react": "^16.5.1",
|
||||
"react-dom": "^16.5.1",
|
||||
"react-router": "^4.3.1",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
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`.
|
||||
-->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM" async defer></script>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
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 = ({
|
||||
map: {
|
||||
height: '92vh'
|
||||
}
|
||||
});
|
||||
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
||||
|
||||
export default class Map extends Component {
|
||||
const style = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
|
||||
export class MapContainer extends Component {
|
||||
|
||||
getLocation = () => {
|
||||
if (navigator.geolocation) {
|
||||
|
|
@ -25,8 +27,8 @@ export default class Map extends Component {
|
|||
// Grand Rapids, Michigan
|
||||
this.setState({
|
||||
myLatLng: {
|
||||
lat: 42.96,
|
||||
lng: 85.66
|
||||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -37,26 +39,71 @@ export default class Map extends Component {
|
|||
this.getLocation();
|
||||
}
|
||||
|
||||
state = {
|
||||
myLatLng: {
|
||||
lat: 42.96,
|
||||
lng: 85.66
|
||||
onMarkerClick = (props, marker) => {
|
||||
this.setState({
|
||||
selectedPlace: props,
|
||||
activeMarker: marker,
|
||||
showingInfoWindow: true
|
||||
});
|
||||
}
|
||||
|
||||
onMapClick = () => {
|
||||
if (this.state.showingInfoWindow) {
|
||||
this.setState({
|
||||
showingInfoWindow: false,
|
||||
activeMarker: null
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
zoom: 15
|
||||
state = {
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
},
|
||||
showingInfoWindow: false,
|
||||
activeMarker: {},
|
||||
selectedPlace: {}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='google-map' style={ styles.map }>
|
||||
<GoogleMapReact
|
||||
<Map
|
||||
style={ style }
|
||||
google={ this.props.google }
|
||||
initialCenter={ this.state.myLatLng }
|
||||
center={ this.state.myLatLng }
|
||||
defaultZoom={ this.props.zoom }>
|
||||
</GoogleMapReact>
|
||||
</div>
|
||||
defaultZoom={ 15 }
|
||||
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)
|
||||
Loading…
Reference in New Issue