Setting map options leads to flicker about react-google-maps HOT 10 CLOSED

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".

from react-google-maps.

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.

from react-google-maps.

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?

from react-google-maps.

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!

from react-google-maps.

@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. ?

from react-google-maps.

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

from react-google-maps.

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

from react-google-maps.

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

from react-google-maps.

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.

from react-google-maps.

map is flickering while typing input and searchbox

from react-google-maps.