On Center Change Issues about old-examples HOT 26 OPEN

I'm getting this GoogleMap bounds not eq warning whenever I specify an onChange. This occurs even if my onChange callback is completely empty! So just adding the following line

onChange={(settings) => { console.log('do nothing'); } }

causes the warnings to occur.

I'm using mobx but don't think that's related. These warnings are not just cosmetic - I've got a bug where the map just zooms back and forth forever by itself, but while trying to debug it I noticed that even this simple case gives warnings. I'm on version 0.14.4.

from old-examples.

As I see two different setState occurs, may be this is the problem
To test it
Just try

import { unstable_batchedUpdates } from 'react-dom'; // eslint-disable-line

 _onChange({center, zoom, bounds, ...other}) {
    unstable_batchedUpdates(() => {  
       this.props.onZoomChange(zoom);
       // change center here
       this.setState({zoom: zoom});
    });
  }

from old-examples.

Also If you use controllable - it has a bug with additional setState even if it does not needed.
So u need to use it very accurately.

from old-examples.

Simplifying the example I see similar error messages. First I removed controllable. Then, I changed onChange to just call forceUpate.

_onChange({center, zoom, bounds, ...other}) {
        this.forceUpdate();
}

I have also tried it with unstable_batchedUpdates();

The error I see now is: "google_map.js:697 GoogleMap bounds not eq:
[39.95968800377787, -105.27453406032988, 39.537343752155806, -104.72521765407988]
[39.95021374267523, -105.26629431423612, 39.527811237785244, -104.71697790798612]"

from old-examples.

Have no such issue. Have fully controllable zoom an center in my projects and in a part of this examples. You can place anywhere the minimal example with this error.

from old-examples.

Here is working jsbin with latest GoogleMapReact version, could you show the bug there?
https://jsbin.com/lepadusowo/edit?js,console,output

from old-examples.

Hi,

Thanks for the example! If you use the same example but change setState to _onChange = ({center, zoom}) => {
this.forceUpdate();
}
it reproduces the error. See: https://jsbin.com/wibufeyibe/edit?js,console,output

from old-examples.

It is normal behavior. As like as I want. Why you need forceUpdate here?

from old-examples.

Force update was my attempt to pinpoint why the following was giving me error:

this.props.onZoomChange(zoom);
this.setState({zoom: zoom});

I am new, so it is very likely my understanding of acceptable flow is wrong. On an update event, why shouldn't it be able to force a rerender right away?

from old-examples.

You can force rerender if you set zoom and center.
It is just a wrapper over non react events generated by google api, and component behavior is the same as you set forceUpdate inside any non react like onChange event. (For example trying to combine React with some Jquery plugin)

Google API is not declarative,
when I send you an onChange event - some part of google code already think that zoom or/and center has changed.
It's not like in React.
Even you will work with just an simple input and move onChange handler outside batched update (directly intercepting change event, or via setTimeout) you will get the same behavior.

So you can or set zoom and center as like as in example.
Or use them in an uncontrollable way. (So u can refresh update etc)

from old-examples.

Here is simple example with other situation but it give you an idea how is to work with third party api https://jsbin.com/jadefenuza/edit?js,console,output
think on input as an about some third party component.

All looks nice until you try to change input anywhere inside,
http://recordit.co/3qtmlkVj2m

from old-examples.

Thanks for the explanation and examples!

from old-examples.

So the problem I am trying to solve is when I change zoom/center on the map, it update my reflux store so other components can filter on it. Similarly, when other components change these in the reflux store the map itself will update.

I can see it's similar to, but the loop I implicitly create causes issues:
https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_events/events_map_page.jsx

Do you have any recommended approach?

from old-examples.

The same approach as in jsbin example
The only difference that instead of setState you just call flux action, and get center and zoom from flux store.
Here https://github.com/istarkov/google-map-react-examples/blob/master/web/flux/components/examples/x_main/main_map_page.jsx all is done the same way, using redux as flux. (center zoom etc is inside redux store)

from old-examples.

Finally got it working! At the end, I was seeing that message because although data was changing, I had a typo in my connector so my zoom/center were not getting updated in the redux store and instead cycling in the default value. Thank you for your help. This project and the examples are amazing.

from old-examples.

I'm trying to control map boundaries through state and get this error GoogleMap bounds not eq.

handleBoundsChange(obj) {
    let newCenter = this.lastValidCenter,
        newZoom = (obj.zoom >= this.minZoomLevel ? obj.zoom : this.minZoomLevel);
    if (this.allowedBounds &&
        this.allowedBounds.contains(new this.mapsObject.LatLng(obj.center))) {
      newCenter = this.lastValidCenter = obj.center;
    }
    this.setState({
      center: newCenter,
      zoom: newZoom
    });
  }

<GoogleMap
        center={this.state.center}
        zoom={this.state.zoom}
        options={mapconfig}
        onChange={::this.handleBoundsChange}>
</GoogleMap>

from old-examples.

If u close console, does your code works? Is your problem in warning message only?

from old-examples.

Yes it brings the center back if it exceedes the bounds, but zoom level stays the same, not changing back to minZoomLevel

from old-examples.

@fruitkiwi Found this issue will work at today.

from old-examples.

I can confirm that the GoogleMap bounds not eq warning is happening with:

test() {
  console.log('foo');
}

<GoogleMap onChange={this.test}>

Mobx isn't the reason, I'm using Redux with SSR, for example. If i remove onChange the warning doesn't appear anymore.
I'd be happy to offer more details if you need

from old-examples.

I'm seeing the same problem. Only happening when I change zoom AND center. Changing center by itself doesn't throw the "bounds not eq" error. Confused, bc the bounds should have changed if zoom and center change.

from old-examples.

Hi @istarkov : I am facing some rendering issue. Need your help, can you please tell me how can i refresh the map. I need to refresh map because in my case i am resizing wrapper so it doesn't render to the new height.

from old-examples.

@SerbanC: I've been getting the same warning, but I just got it to go away by updating to the newest version of the package and adding the following attribute to the component:

<GoogleMap resetBoundsOnResize {...props } />

as per this PR. Hope that helps.

from old-examples.

Hi Guys,

N00bie here and I am having issue triggering the re-centring of the map using the onChildClick option of the GoogleMap element:

<GoogleMap
     bootstrapURLKeys={{key: 'XXXxxyyyYYY'}}
     center={this.props.center}
     zoom={this.props.zoom}
     hoverDistance={K_SIZE / 2}
     onChange={this._onChange}
     onChildClick={this._onChildClick}
     onChildMouseEnter={this._onChildMouseEnter}
     onChildMouseLeave={this._onChildMouseLeave}
 >
              {this._siteGen()}
</GoogleMap>

This is my _onChildClick function:

  _onChildClick = (key, childProps) => {
    for(var i =0;i!=this.state.cntry.length;i++)
      if(this.state.cntry[i]._id == key ){
        this.setState({title: this.state.cntry[i].name});
        this.props.onCenterChange([childProps.lat, childProps.lng]);
    }
  }

This does nothing even though I have confirmed that the childProps values are correct. I experimented with using states, i.e.:

<GoogleMap
     bootstrapURLKeys={{key: 'XXXxxyyyYYY'}}
     center={this.state.center}
     zoom={this.state.zoom}
     hoverDistance={K_SIZE / 2}
     onChange={this._onChange}
     onChildClick={this._onChildClick}
     onChildMouseEnter={this._onChildMouseEnter}
     onChildMouseLeave={this._onChildMouseLeave}
 >
              {this._siteGen()}
</GoogleMap>

  _onChildClick = (key, childProps) => {
    for(var i =0;i!=this.state.cntry.length;i++)
      if(this.state.cntry[i]._id == key ){
        this.setState({title: this.state.cntry[i].name,
                             center:[childProps.lat, childProps.lng],
                             zoom: this.state.cntry[i}.Zoom);
    }
  }

Zoom works but the map remains on the original center value and this can be done only once. Im not sure if this was answered before, but reading through the comments it seems this is not issuing that is being reported even though the title seems to suggest this problem.

Any ideas as how to get this working ?

from old-examples.

Please provide jsbin example. As the code you provided above contains syntax errors

from old-examples.

I faced the same issue and the easiest solution is to remove the element and then add it back.
{this.state.showMap &&

....

}

You can set showMap state flag to false and then using setTimeout(()=>{ me.setState({showMap:true},200)}

Works like charm. Maybe not the best UX but not that bad either

from old-examples.