Trying to get a hover event in application to trigger a marker animation without re-rendering entire map

[eamonpenland]

Hi, I have a hover event on a info card that corresponds to a marker on the map. When I hover on the card, I successfully trigger the animation on the correct marker, but it triggers a full refresh of the map component. How can I prevent the map from doing a full refresh? Currently, I am just changing the animation property on the component based on which card is hovered.

The trigger data is tied into redux and then passed into my map component by a parent container.

Any help would be awesome. Thanks!

[eamonpenland]

or am i missing this in the other issues somewhere?

[rewop]

It may be related to #240

[rewop]

@eamonpenland it would be best if you could post an example to reproduce your issue.

[eamonpenland]

@rewop sure thing https://gist.github.com/eamonpenland/6e135678dab10a5f9f9c547e8e0968ed

Someone else wrote this code. I'm in the process of refactoring and improving!

I think i will need to use shouldComponentUpdate. Ideally I would like to make the hover effect function like this example. http://istarkov.github.io/google-map-react/map/main/

[rewop]

Thanks @eamonpenland I will look into it asap.

[eamonpenland]

hey @rewop any thoughts on this issue?

[woniesong92]

+1. If I only want to replace one of the markers instead of the entire map, do I still have to re-render the entire map?

[RishabhJain96]

@eamonpenland Did you solve this issue/find a workaround?

[rewop]

Sorry guys for the delay. I will look into this in the weekend.

[eamonpenland]

@RishabhJain96 Hey! sorry for the late reply. I haven't found a solution. Actually, I put the refactor of that component on the back burner as the re-render was annoying but not unusable in production. Revisiting the refactor now though. @rewop any ideas?

[RishabhJain96]

I managed a workaround albeit using Rectangles rather than Markers. The gist was wrapping all the components in another component and then using MobX observables to prevent rerendering of the entire map.

[eamonpenland]

@RishabhJain96 interesting. Was there a reason for using Rectangles vs Markers? Any way you could share a gist?

[RishabhJain96]

Sorry for the delay, I can't actually share a gist. The rectangle vs markers didn't actually matter.

[ihsansatriawan]

Hi @eamonpenland did you solve this issue/find a workaround?

[tomchentw]

Please refer to Getting Help section in the README (or #469).

[foloinfo]

Hi, I had a similar issue when I wanted to handle Marker and InfoWindow. I followed example and when I clicked Marker, it displays InfoWindow like in this example. However every time I click on marker then whole map was re-rendered and it was really annoying.

I could avoid re-rendering of whole map by splitting components and handle onClickMarker in child component.

It still re-renders whole map when I add or remove Markers on map, so I hope someone has better solution or explain why it happens.

I paste my code as sample. I hope it helps someone like me.
I'm writing here because I couldn't find related question in Stackoverflow.

"react": "^15.6.1",
react-google-maps@next: version "7.1.0"

import React from 'react'
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps"
import deepEqual from 'deep-equal'

class CustomMarker extends React.Component{

  constructor(props){
    super(props)
    this.state = {
      showInfo: false
    }
  }

  render(){
    return(
      <Marker
        key={JSON.stringify(this.props.position)}
        {...this.props}
        onClick={this.onClickMarker.bind(this)}
      >
        {this.state.showInfo && (
          <InfoWindow onCloseClick={this.onMarkerClose.bind(this)}>
            <div>info window</div>
          </InfoWindow>
        )}
      </Marker>
    )
  }

  onClickMarker(){
    this.setState({showInfo: true})
  }

  onMarkerClose(){
    this.setState({showInfo: false})
  }
}

class Map extends React.Component{

  shouldComponentUpdate(nextProps, nextState){
    // check for props to avoide re-rendering
    if(!deepEqual(this.props.center, nextProps.center)){
      return true
    }else if(!deepEqual(this.props.markers, nextProps.markers)){
      return true
    }else{
      return false
    }
  }

  render(){
    const SyncMap = withGoogleMap(
        props => (
          <GoogleMap
            key='map'
            defaultZoom={props.zoom}
            defaultCenter={{ lat: props.center.lat, lng: props.center.lng }}
            onClick={props.onClick.bind(this)}
          >
            {this.props.markers.map(marker => (
              <CustomMarker {...marker} />
            ))}
          </GoogleMap>
        )
      )
    var map
    if(this.props.center.lat && this.props.center.lng){
      map = <SyncMap
        {...this.props}
        loadingElement={
          <div style={{ height: `100%` }} />
        }
        containerElement={
          <div style={{...this.props.containerStyle}} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
      />
    }else{
      map = <div style={{height: this.props.height}} />
    }
    return(map)
  }

}

export default Map

[JulienCorb]

Hey I am also looking for a solution for this; I am building an airbnb-like app where you have a bunch of cards on the left and a map on the right. When the user hovers on a card, it should highlight the marker on the map.

As everyone in this issue, I managed to do this but the map re-renders every time a new card is hovered on.

That very annoying and considering the new pricing of google map, I can't affort this solution in production.

Did anyone managed to solve this problem ?