Setting map options leads to flicker

[ksavenkov]

This is actually a question. I want to highlight polylines on hover event.
I am doing that in in the following fashion:

• keep an index of polyline to highlight in the map's state
• use it to set proper stroke color (highlighted or not)
• pass functions that modify state as onMousover and onMouseout handlers of the polyline.

That works, but leads to blinking of the map controls - apparently, they are rerendered. What I expect to have - to mimic native Google Maps solution, when you bind polyline.setOptions to the mouseover event, which doesn't lead to rerendering of the controls.

What's the best way to achieve that with react-google-maps?
Thanks!

[ksavenkov]

Meanwhile I figured out the source of my problem. I define custom position of the map controls and pass the map options as props:

getDefaultProps: function(){
        return {
            mapOptions : {
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                panControl: true,
                panControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_TOP
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.RIGHT_TOP
                },
                scaleControl: true,
                scaleControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_TOP
                },
                streetViewControl: false,
                scrollwheel: false
            }
        }
    },
/*...*/
render:
/*...*/
<GoogleMaps {...this.props.mapOptions}
  /*...*/ >
  {polylines}
</GoogleMaps>

By some reason, React thinks the props has changed (while they aren't) and redraws the map controls.

[ksavenkov]

More exactly, any customisation of the map controls in props leads to controls flickering when the children are updated. E.g.

<GoogleMaps mapTypeControlOptions = {{
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_RIGHT
                }}>
...

Do you have any suggestion how to solve that?

[tomchentw]

Hi @ksavenkov , I took a day to rewrite the module from scratch on #88 . Not sure if it will help but it will be great if you could take a look at it. Thanks!

[ksavenkov]

@tomchentw, great improvement! Yes, now the problem resolved. However, it's a bit tedious to write "default" prefix for all 10+ map options - is that possible to make defaultOptions={...} prop work for GoogleMap component much like it works for markers etc. ?

[tomchentw]

defaultOptions and options are supported for markers as well. It's the same semantic for stock Google Maps JavaScript API v3

[ksavenkov]

I mean, it seems they aren't supported for GoogleMap component.

[tomchentw]

I saw there's a setOptions on Marker class in v3.21

[ksavenkov]

My bad - I wrapped props for GoogleMap in options={...} and forgot to remove default- prefixes. Now everything works just fine - I create custom controls and they aren't rerendered.

[dogofpavlov]

I actually just ran into a similar situation. I'm leaving this note for someone else in the future. After a good amount of hair pulling I found that if you're passing "options" and the map is flickering like crazy, you should instead pass the values as "defaultOptions".

[yashwan]

map is flickering while typing input and searchbox