Comments (12)
I see. Could you show me the reason why you'd like to read properties from a newly-changed Marker
? Since if everything is rendered with given props, you already know the value from your data, right?
from react-google-maps.
Well, my use case actually involves reading shape data from a component that renders Circle
items. I need to access Google Maps API features, like circle.getBounds()
, after some event was triggered.
I suppose I could create a new google.maps.Circle
every time from the original input props, but that is annoying and less performant. Also I just feel like it's a reasonable exception for the components to stick to the standard React lifecycle and expose the correct data at that time via the getters.
from react-google-maps.
Related to #36
from react-google-maps.
Just tried with your use case with react-google-maps/#basics/geolocation, yes, changing callback to componentWillUpdate
of GoogleMaps
will fix this issue.
However, I'm thinking that the same use case may apply for componentDidMount
since we do _render_virtual_container_
in GoogleMaps#componentDidMount
as well. As a result, I suspect changing to componentWillUpdate
may not be a permanent solution.
from react-google-maps.
The VirtualContainer
technique prevents the leak of two wrapper div
s around the google.maps.Map
instance and react components. If we only use one wrapper div
, then initialise google.maps.Map
instance on it as well as rendering children components inside it. When next update ticks, React will clean out everything created by google.maps.Map
instance. Thus only <noscript>
tags left inside the <div>
from react-google-maps.
Interesting. React definitely needs some kind of first-class "fragment" element that does not render anything to the DOM. I know they are working on it.
In the mean time, have you looked at react-outlet? It could possibly be of interest here.
Another interesting approach is the way MartyJS creates "container" components: calling Marty.createContainer(SomeComponentToWrap)
, but also giving you the option to override the method which actually renders the component.
from react-google-maps.
from react-google-maps.
Can we just ditch the extra div
being created to house the container and instead render the children as either children or siblings of the Google Maps div itself?
This would solve this issue as well as the issue where we can't render any DOM elements as children of the GoogleMaps
component.
Also, looking more closely at the code, I believe there is a memory leak in the current implementation, as the containerNode
is never actually destroyed on unmount (just set to null), so new container divs
will be created each time the component is mounted. (Unless React.unmountComponentAtNode()
handles this)
from react-google-maps.
@idolize , could you please provide an example of we can't render any DOM elements as children of the GoogleMaps component
. Cause I cannot understand why you'd like to do it this way. A simple gist would be enough.
Thanks!
from react-google-maps.
Yeah, my use case is I want to use my own DOM elements to replace some Google Maps controls. The Google Maps API allows you to do this for almost any control (such as the zoom indicator, panning buttons, drawing controls, etc.)
Here is an example of how I could overwrite the drawing controls (which worked in the pre-wrapper component versions of this lib):
import React from 'react';
import {DrawingManager} from 'react-google-maps';
export default React.createClass({
getInitialState() {
return { drawingMode: null };
},
setDrawingMode(drawingMode) {
this.setState({ drawingMode });
},
render () {
return (
<div>
<DrawingManager
{...this.props}
drawingControl={false} {/* Use our own buttons instead of the Google Maps built-in drawing control */}
drawingMode={this.state.drawingMode}
/>
<button onClick={this.setDrawingMode.bind(this, google.maps.drawing.OverlayType.CIRCLE)} className={this.state.drawingMode === google.maps.drawing.OverlayType.CIRCLE ? 'active' : ''}>Circle</button>
<button onClick={this.setDrawingMode.bind(this, google.maps.drawing.OverlayType.POLYGON)} className={this.state.drawingMode === google.maps.drawing.OverlayType.POLYGON ? 'active' : ''}>Polygon</button>
</div>
);
}
});
But this doesn't work with the current implementation because the new drawing controls I try to render don't show up, as they are rendered inside the virtual container div.
The only way to get it to work with the current implementation involves duplicating state (in this case state.drawingMode
) inside both the component to render as a child of GoogleMaps
as well as inside my other "control" component, and then wiring them together with callbacks 😢.
from react-google-maps.
I believe this was fixed in #61. And I certainly believe that I use a elegant way for component lifecycle in the rewrite of #88. Please take a look at it and comments are welcome, thanks!
from react-google-maps.
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.