خرید بک لینک

Vote count: 0

My React/Redux component for working with Google Maps:

import React, { Component, PropTypes } from 'react'
import { coect } from 'react-redux'

import { changeMapCenter } from '../actions'

class Map extends Component {

  componentDidMount() {
    let script = document.createElement('script')

    script.setAttribute('type', 'text/javascript')
    script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCXg-YGJF&callback=initMap')
    document.getElementsByTagName('head')[0].appendChild(script)

    window.initMap = () => {
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: this.props.defaultCenter,
        zoom: this.props.defaultZoom
      });

      this.map.addListener('center_changed', (event) => {
        let center = {
          lat: this.map.getCenter().lat(),
          lng: this.map.getCenter().lng()
        }
        this.props.onMapCenterChanging(center)
      });
    }
  }

  render() {
    retu (
      <div id='map'></div>
    );  
  }
}

const mapStateToProps = (state) => {
  retu {
    mapPoints: state.mapPoints
  }
}

const mapDispatchToProps = (dispatch) => {
  retu {
    onMapCenterChanging: (center) => {
      dispatch(changeMapCenter(center))
    }    
  }
}

export default coect(mapStateToProps, mapDispatchToProps)(Map)

As you can see now this component just initializes map and listens map center changing. Now I need render some markers (mapPoints). From Google API Documentation I can do it (for example):

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Click to zoom'
  });

But how can I do in 'React-style'? Because drawing marker is not 'render' HTML, it's just calling JS Google Maps API function. I can put this logic in 'initMap' function, but my 'mapPoints' can change. Should I put JS logic (removing deleted points / draw new points) in 'render' function? Thanks!

asked 1 min ago

برچسب: نویسنده: استخدام کار تاريخ: يکشنبه 23 خرداد 1395 ساعت: 4:08

صفحه بندی