Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react'
- import GoogleMap from 'google-map-react'
- import Marker from './Marker'
- import MarkerImage from '../res/img/location-pin-add-2-solid.svg'
- class MapContainer extends Component {
- constructor() {
- super();
- this.state = {
- markers: []
- }
- }
- componentDidMount() {
- this.getPropsAsync()
- }
- setMarkers(stations) {
- let markers = []
- function filterStations() {
- stations.forEach(station => {
- markers.push(
- <Marker key={station.lat + station.lng}
- lat={station.lat}
- lng={station.lng}
- title={station.title}
- image={MarkerImage}
- />)
- })
- }
- filterStations()
- return markers
- }
- getPropsAsync() {
- let getAllPromise = new Promise(resolve => {
- resolve(this.props.stations)
- })
- const asyncGet = async () => {
- try{
- const stations = await getAllPromise.then(stations => stations)
- const markers = await this.setMarkers(stations)
- this.setState({markers})
- } catch (e) {}
- }
- asyncGet()
- }
- render() {
- return (
- <div id="map">
- <GoogleMap
- bootstrapURLKeys={{key: 'KEY'}}
- defaultCenter={this.props.center}
- defaultZoom={this.props.zoom}
- >
- {console.log(this.state.markers)}
- </GoogleMap>
- </div>
- )
- }
- }
- MapContainer.defaultProps = {
- center: {
- lat: 42.73,
- lng: 25.49
- },
- zoom: 8
- }
- export default MapContainer
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement