Clicking on infowindow and then back to map rerenders markers.

Why are markers rerendered everytime there is some interaction with infowindow?

this project does not use react very well. the authors wrote this so they could market their book. ironically marketed by saying "learn react the right way"

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

@Qwiso

@Qwiso do you know any other library which doesn't requires too much setup... I did tried using should ComponentUpdate but too much of if statements and still for one case I am unable to handle the update.... This updating thing should be part of core module only then it will work in all scenarios. Would be great if you can tell me any other library.

even if I update other state variables on the screen/component which are not used for map component also rerendering the map component. This should not be expected behaviour does anyone know how to fix it ?

@kashifaliquazi

@kashifaliquazi yup it is happening. Mayb to keep mapview away from redux? Thats the only way i think to avoid rerendering

To solve this issue of re-rendering and to allow for editing of SVG data which is mentioned in other issues, I implemented a new property in Marker.js and changed the logic of the componentDidUpdate method

{
	  key: 'componentDidUpdate',
	  value: function componentDidUpdate(prevProps) {
			if (this.props.shouldRender) {
			  this.marker.setMap(null)
			  this.renderMarker()
			}
	  }
}

in the render method of my map view, I create each marker based on custom object I am using from the state

let userMarkers = this.state.userMarkers.map((marker, index) => {
	let userMarker = <Marker
		key={index}
		name={marker.name}
		position={marker.position}
		icon={marker.iconSVG}
		onClick={this.onMarkerClick}
		shouldRender={marker.shouldRender}
	/>
	marker.shouldRender = false
	return userMarker 
})

and finally,

  <Map
	styles={this.state.mapStyle}
	onClick={this.onMapClicked}
	google={this.props.google}
	zoom={10}
	center={this.state.panToPos ? this.state.panToPos : null}
  >
	{userMarkers}
</Map>

@Qwiso

@Qwiso

{
	  key: 'componentDidUpdate',
	  value: function componentDidUpdate(prevProps) {
			if (this.props.shouldRender) {
			  this.marker.setMap(null)
			  this.renderMarker()
			}
	  }
}

Is this ES5?

@themakerman

@themakerman it's just the part of the source code that i've changed. Marker.js from google-maps-react module. that what it looks like. not sure if it's ES5

@Qwiso

@Qwiso Ohh i got it. You edited the module itself. Why not PR?

@themakerman

@themakerman because, as written, it's a breaking change to the existing functionality. it's not a great way of doing things but it works for me

Extending the Marker component works in the meantime until the comparison fix is merged:

class CustomMarker extends Marker {
  componentDidUpdate(prevProps) {
    if(
      this.props.map !== prevProps.map || 
      this.props.icon.url !== prevProps.icon.url || 
      (
        this.props.position.lat !== prevProps.position.lat || 
        this.props.position.lng !== prevProps.position.lng
      )
    ) {
      if(this.marker) {
        this.marker.setMap(null);
      }
      this.renderMarker();
    }
  }
}

@srobertson421

@srobertson421 , Your solution is pretty nice, but still forces me to pass property icon otherwise I will get error, so I do a little patch hope it helps:

class CustomMarker extends Marker {
  componentDidUpdate(prevProps) {
    if(
      this.props.map !== prevProps.map || 
      (this.props.icon && ( this.props.icon.url !== prevProps.icon.url )) || 
      (
        this.props.position.lat !== prevProps.position.lat || 
        this.props.position.lng !== prevProps.position.lng
      )
    ) {
      if(this.marker) {
        this.marker.setMap(null);
      }
      this.renderMarker();
    }
  }
}

When I use custom url for marker, it re renders the marker. Is there any solution to fix that ?

@radinreth

@radinreth and @srobertson421 - sending many many blessings to your and your family and your cousin and friends. I couldn't knock it and your code works beautifully.

Extending the Marker component works in the meantime until the comparison fix is merged:

class CustomMarker extends Marker {
  componentDidUpdate(prevProps) {
    if(
      this.props.map !== prevProps.map || 
      this.props.icon.url !== prevProps.icon.url || 
      (
        this.props.position.lat !== prevProps.position.lat || 
        this.props.position.lng !== prevProps.position.lng
      )
    ) {
      if(this.marker) {
        this.marker.setMap(null);
      }
      this.renderMarker();
    }
  }
}

What is the status of this? Is it already integrated into the lib?

@kevinvugts

@kevinvugts currently this is still the only workaround. This library isn't very well supported.

Navigation Menu

Repository navigation

Clicking on infowindow and then back to map rerenders markers. #269

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Clicking on infowindow and then back to map rerenders markers. #269

Description

Activity

Qwiso commented on Oct 15, 2018

themakerman commented on Oct 15, 2018

kashifaliquazi commented on Oct 16, 2018

themakerman commented on Oct 24, 2018

Qwiso commented on Oct 24, 2018

themakerman commented on Oct 25, 2018

Qwiso commented on Oct 25, 2018

themakerman commented on Oct 26, 2018

Qwiso commented on Oct 26, 2018

srobertson421 commented on Jun 15, 2019

radinreth commented on Aug 1, 2019

sridaradappt commented on May 8, 2020

teadams commented on Aug 31, 2020

kevinvugts commented on Jan 12, 2021

dannyVortexIoT commented on Feb 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions