Advertisement
Xzahn

MapContainer.JS

Oct 30th, 2018
317
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import GoogleMap from 'google-map-react'
  3. import Marker from './Marker'
  4. import MarkerImage from '../res/img/location-pin-add-2-solid.svg'
  5.  
  6. class MapContainer extends Component {
  7.     constructor() {
  8.         super();
  9.         this.state = {
  10.             markers: []
  11.         }
  12.     }
  13.  
  14.     componentDidMount() {
  15.         this.getPropsAsync()
  16.     }
  17.  
  18.     setMarkers(stations) {
  19.         let markers = []
  20.  
  21.         function filterStations() {
  22.             stations.forEach(station => {
  23.                 markers.push(
  24.                 <Marker key={station.lat + station.lng}
  25.                     lat={station.lat}
  26.                     lng={station.lng}
  27.                     title={station.title}
  28.                     image={MarkerImage}
  29.                 />)
  30.             })
  31.         }
  32.            
  33.         filterStations()
  34.  
  35.         return markers
  36.     }
  37.  
  38.     getPropsAsync() {
  39.         let getAllPromise = new Promise(resolve => {
  40.             resolve(this.props.stations)
  41.         })
  42.  
  43.         const asyncGet = async () => {
  44.             try{
  45.                 const stations = await getAllPromise.then(stations => stations)
  46.                 const markers = await this.setMarkers(stations)
  47.                 this.setState({markers})
  48.             } catch (e) {}
  49.         }
  50.  
  51.         asyncGet()
  52.     }
  53.  
  54.     render() {
  55.         return (
  56.             <div id="map">
  57.                 <GoogleMap
  58.                     bootstrapURLKeys={{key: 'KEY'}}
  59.                     defaultCenter={this.props.center}
  60.                     defaultZoom={this.props.zoom}
  61.                 >
  62.                     {console.log(this.state.markers)}
  63.                 </GoogleMap>
  64.             </div>
  65.         )
  66.     }
  67. }
  68.  
  69. MapContainer.defaultProps = {
  70.     center: {
  71.         lat: 42.73,
  72.         lng: 25.49
  73.     },
  74.     zoom: 8
  75. }
  76.  
  77. export default MapContainer
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement