Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Draw dynamic markers and polygon each render call

See original GitHub issue

I am trying to use your library and i found it very helpfull. I am trying to draw a map with some markers and draw poligons to show a path dynamically, depends on the markers count. I want to draw another marker on some user action and draw a poligon from some earlier marker to this new marker at render . The example I’ve seen is drawing polygon on ‘onGoogleMapAPILoaded()’ event which is not firing again on further component renders. Can you suggest me some way around in this regard.

My Map Component:

import React from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';
import GoogleMap from 'google-map-react';
import MyGreatPlace from './MapPlace';
import MarkerStore from '../../stores/MarkerStore'
import MarkerAction from '../../actions/MarkerAction'

export default class SimpleMapPage extends React.Component {
  static propTypes = {
    center: React.PropTypes.array,
    zoom: React.PropTypes.number,
    greatPlaceCoords: React.PropTypes.any
  };


  componentDidMount() {
  }
  componentWillReceiveProps(){}



      constructor(props) {
    var geodesicPoly=[];
    super(props);
  }

  update() {
    console.log(this.geodesicPoly);
    for (var i =1; i<this.geodesicPoly.length;i++){
      var path = [new google.maps.LatLng(this.props.markers[i-1].lat,this.props.markers[i-1].lng),
    new google.maps.LatLng(this.props.markers[i].lat,this.props.markers[i].lng)];
      //poly.setPath(path);
      this.geodesicPoly[i].setPath(path);
    }

  }
  render() {
    return (
        <div className="map">
          <GoogleMap style={{position:'absolute',width:'50%',height:'50%'}}
                 YesIWantToUseGoogleMapApiInternals={true}
                 onGoogleApiLoaded={({map, maps}) => {
              this.geodesicPoly=[];
          for (var i=1; i< this.props.markers.length; i++)
                          {
            this.geodesicPoly[i] = new maps.Polyline({
              strokeColor: '#CC0099',
              strokeOpacity: 1.0,
              strokeWeight: 3,
              geodesic: true,
              map: map
            });
            }

            this.update();
        }}
                 bootstrapURLKeys={
                {key: 'AIzaSyClrg6TsqAGm4zfUTBcZGXMxdG2Sg3LnfM'}
            }// set if you need stats etc ...
                 center={this.props.center}
                 zoom={this.props.zoom}>
        {
          this.props.markers.length >0 ?
              this.props.markers.map((marker, index) => {this.markers = this.props.markers;
                return (
                    <MyGreatPlace key={index} lat={marker.lat} lng={marker.lng} text={marker.name} />
                )

              }) :''

        }
      </GoogleMap>
        </div>
    );
  }
}

    module.exports =  SimpleMapPage;