Comments (8)
Well, as I design the API, one thing I'd like to address is data-driven programming. So as a result, the input of a component (props) should ALWAYS reflect its current drawings. We can just change the UI by giving it new props and it will update accordingly. It's Reactive way of doing UI and that's why React.js is awesome.
For your question here, a solution is to treat <GoogleMaps>
a stateful component (as it really is), and then when it's state changes, we can be notified by the event callback. Thus, you could set:
<GoogleMaps
{...initialProps}
onCenterChanged={this.updateCenter} center={this.state.center}
onZoomChanged={this.updateZoom} zoom={this.state.zoom}
/>
By doing this, your state is kept in sync with <GoogleMaps>
internal state. This example shows exactly the same thing:
https://tomchentw.github.io/react-google-maps/#events/event-properties
from react-google-maps.
Did you mean <GoogleMaps>
component or <Marker>
or both?
from react-google-maps.
Would you like to be more elaborate on what unexpected behaviour would like?
from react-google-maps.
In my case, it's<GoogleMap>
. For example, I have a component of the following class:
class MapCanvas extends React.Component {
render() {
return (
<GoogleMaps containerProps={{
style: {
height: '100%'
}
}}
googleMapsApi={google.maps}
ref="map"
zoom={6}
center={{lat: 42, lng: 42}}>
<InfoWindow content={`count: ${this.props.count}`} position={{lat: 44, lng: 44}}></InfoWindow>
</GoogleMaps>
);
}
}
MapCanvas.defaultProps = {
count: 1
};
The count in the prop will be updated every second. Accordingly, the setOptions
method of the map instance will be invoked every second, so the map will pan to the default center {lat:42, lng:42}
and zoom to 6
every second, regardless of that the map has been scrolled to other place by an user.
I know there are some workarounds. However, this is what I said "unexpected behaviour".
from react-google-maps.
Maybe <GoogleMap>
should call the setOptions
method in the background only when an instance is created, like we usually do with native Google Maps api const map = new google.maps.Map(DOMNode, mapOptions)
. After that, we should control a map by calling setOption
or other methods explicitly instead of changing props
.
Or, maybe, we can let options
be an immutable object prop of a <GoogleMap>
, then check whether it has been changed in the shouldComponentUpdate
internally.
from react-google-maps.
I got your point and I believe you are right! We should never expose set methods outside the box. Thanks for your explanation. I will check it later to see whether we could call setOption
as frequently as centerChanged events are triggered without losing performance significantly, and then I will close this issue.
from react-google-maps.
It turns out that Google Map runs smoothly.
from react-google-maps.
Cool man! Glad it works. Feel free to reopen the issue in the future.
from react-google-maps.
Related Issues (20)
- how to add button re center on map HOT 1
- Problems while implementing Content Security Policy HOT 1
- Polygon not being drawn on the map HOT 1
- CWE-601 Security Vulnerability found in one of the transitive dependencies HOT 1
- Legacy context API has been detected within a strict-mode tree. HOT 1
- AutoComplete Default Value
- Check this use 'window'
- Error when installing HOT 3
- Could not resolve dependency: npm ERR! peer react@"^16 || ^17" from [email protected]
- Problem in Installation HOT 2
- I can not push custom control button to the map
- More than 700 re renderings HOT 1
- Is there any benefits to using MarkerClusterer, rather than simply using Markers?
- Best Way To Style Marker Labels?
- KMlLayer 2d, 3d kmz file or kml file highlighted layer not showing
- f.setPosition is not a function
- How can I get the DOM element for Marker?
- disable map zoom when DirectionsRenderer redraws the path
- Upgrade jQuery dependency inside scriptjs package. HOT 1
- Update needed?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-google-maps.