Comments (13)
Kind of interesting. What's your expected API ?
from react-google-maps.
Since #32 is landed, currently the InfoWindow
API would look like this:
<InfoWindow title="Blabla" onClick={this.handleClick} />
Combined with marker:
<Marker lat={lat} lng={lng}>
<InfoWindow title="Blabla" onClick={this.handleClick}>
</Marker>
Proposed API for InfoWindow
with React component:
<InfoWindow title="Blabla" onClick={this.handleClick}>
<MyFancyReactComponent>
<ItShouldAlsoSupportDiffAlgorithmHere />
</MyFancyReactComponent>
</InfoWindow>
Is this what you want?
from react-google-maps.
👍 This API is exactly what I want. But a content of InfoWindow
is not in a react shadow DOMs tree, how will you implement this?
from react-google-maps.
This would be exactly what I need. It's crucial for my application!
from react-google-maps.
This can be implement by the following:
- Create a detached DOM using
document.createElement
- Render the passed in child using
React.render(React.Children.only(props.children), detachedDOM)
- Pass the
detachedDOM
into InfoWindow({content: detachedDOM})
What do you guys think?
from react-google-maps.
After passing the detachDOM
to a InfoWindow
, a InfoWindow
will call setOptions to set the content internally. So the content of InfoWindow
will remount into GoogleMaps DOM tree every time when the InfoWindow
is update and won't utilize React diff right?
from react-google-maps.
No. As long as the detachedDOM
is the same instance, React will recognize it.
from react-google-maps.
I know it's impolite to ask if anyone has implemented this feature, but I want to do it anyway since I would need this feature. Is there any progress? I'm just building my first app with react and I'm not quite sure if I could implement this feature myself. Sorry.
from react-google-maps.
from react-google-maps.
how to hide infow window close buttom???
from react-google-maps.
how to hide infow window close buttom???
from react-google-maps.
how to customize info window i can't change default style
from react-google-maps.
what about the Marker, can we pass jsx element against marker's icon props ?
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.