Comments (16)
What if you explicitly set width and remove display
css prop
<div style={{height: "400px", width: "400px" }}>
?
Does window resize helps?
from google-map-react.
Hi @istarkov, window resize followed by moving the map does reposition the icon.
I narrowed it down to being related to a css zoom animation applied to one of the outer components by <ReactCSSTransitionGroup>
. The CSS is "borrowed" from animate.css. This uses transform: scale3d(.3, .3, .3)
which I believe is the cause.
Is there perhaps a way to defer the marker placement until after the animation completes?
from google-map-react.
This is because on the moment of GoogleMap
component created, size of it's container is unknown or small (because of animation).
It's almost impossible in browser without periodic checks to get component size. So one solution is to create GoogleMap control after animation completes.
Other hack
solution is to call via ref
next method on GoogleMap:
googleMapRef_._setViewSize();
and modify center
prop on small small delta.
example:
// CALL THIS TO REFRESH SIZE
refresh() {
this.googleMapRef_._setViewSize();
// mb will work without changing center
this.setState({
center: {
lat: this.state.center.lat + 0.000000001,
lng: this.state.center.lng + 0.000000001,
},
});
}
render() {
return (
<GoogleMap ref={r => this.googleMapRef_ = r}
center={this.state.center}
defaultZoom={10}><Marker lat lng/>...
);
}
from google-map-react.
Thank you for your help!
from google-map-react.
@istarkov. tried your given hack solution and don't think it will work if change the height of div container after resize.
from google-map-react.
@martingg88 Why u think so?
@mbrookes Does this hack works for you?
from google-map-react.
i tried it and it doesn't work..
it will work if i do not change height after resize.
from google-map-react.
Provide source
from google-map-react.
run the following function and then your hack solution in onresize event.
_performLayoutFrame: function(){
this.height = window.clientHeight;
this.width = window.clientWidth;
this.refs.map_container.style.width= (this.width) + 'px';
this.refs.map_container.style.height = (this.height) + 'px';
},
from google-map-react.
In onresize event? Why?
from google-map-react.
Also
this.height = window.clientHeight;
this.width = window.clientWidth;
this.refs.map_container.style.width= (this.width) + 'px';
this.refs.map_container.style.height = (this.height) + 'px';
Do u think this is react?
from google-map-react.
i need to resize the container to fit into the visible screen when user resize the browser or rotate mobile device.
from google-map-react.
- Never mutate Dom directly
- Call refresh NOT inside resize event handler (GoogleMap smart enough to do it)
- Call refresh after u changed size of above container. (ComponentDidUpdate is a good place for that)
from google-map-react.
it won't work after try to follow your suggestion.
it will only work without change height dimension for container.
from google-map-react.
I can't say anything without full component source
from google-map-react.
The following is working for me, but seems very smelly. Any improvements?
onResize : function()
{
this._googleMapRef._setViewSize();
if (this.state.maps && this.state.map)
{
let center = this.state.map.getCenter();
this.state.maps.event.trigger(this.state.map, 'resize');
this.state.map.setCenter(center);
}
}
...
<DetectResize onResize={this.onResize}>
<GoogleMap
center={center}
zoom={zoom}
yesIWantToUseGoogleMapApiInternals={true}
onGoogleApiLoaded={({map, maps}) => this.setState({map: map, maps: maps})}
options={getMapOptions}
ref={r => this._googleMapRef = r}
>
...
from google-map-react.
Related Issues (20)
- Google map suddenly stopped loading, white screen appears. HOT 1
- Map Pins are not positioned correctly after zoom or pan HOT 12
- Fitbounds and directionService is not updating markers on the map HOT 1
- Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'm.nB')
- Card with address on upper left corner
- drag the map when we hover on div card outside the map and it show the that particular marker if marker is hide on centre coardinates HOT 1
- Google together with Visgl and OpenJS has released the official react components for Google maps HOT 4
- need to detect getVisible StreetViewService
- BBC – account overview
- User:Meta-Horizon - Meta
- AdvancedMarkerElement HOT 1
- About Open Source Summit | LF Events
- Microsoft Power BI Data Analyst
- Main Page - Meta
- Check out "TikTok"
- #
- Creating a map marker with visgl library
- React.StrictMode throws warning because of findDOMNode use
- React 18 StrictMode: Markers incorrectly positioned HOT 1
- Error: ENOENT: no such file or directory, open @googlemaps\src\index.ts
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 google-map-react.