Comments (19)
Update: I notice further back in the issues someone posted a link to their fork. It has almost identical functionality, but doesn't appear to suffer the issue described above:
https://github.com/giorgiabosello/google-maps-react-markers
from google-map-react.
@shellbryson @tao-qian @jarlnartey @Fullbusters @thinhnuine I have face the same issue and debugged literally 8+ hrs , And finally I found out just remove restrictmode from index.js in react
From :-
<React.StrictMode>
<App />
</React.StrictMode>
);```
To:-
```root.render(
<App />
);```
Happy Hacking !
from google-map-react.
A word of caution: Strict mode is there for a reason and disabling it not a risk worth taking in a production app, in my opinion.
from google-map-react.
Thanks! Switched to https://github.com/giorgiabosello/google-maps-react-markers and it worked well for me so far!
from google-map-react.
I'm having the same issue: Spent hours trying to figure out why this doesn't work. Any markers place on the map do drag when the map is moved or zoomed, but soon as the action stops, the marker components reposition themselves at their initial position (that is, relative to viewport, rather than relative to the map).
const styleMap={
display: "block",
position: "relative",
marginTop: "2rem",
width: "100%",
height: "90vh",
overflow: "hidden",
}
const pinStyle = {
}
const LocationPin = ({ text }) => (
<div style={ pinStyle }>
<PushPinOutlinedIcon />
<p className="">{text}</p>
</div>
)
export default function MapView() {
const [locations, setLocations] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
const q = query(collection(db, "locations"));
const getLocations = async () => {
const querySnapshot = await getDocs(q);
const l = [];
querySnapshot.forEach((doc) => {
l.push({
...doc.data(),
id: doc.id
});
});
console.log("ESFF: loaded locations", l);
setLocations(l);
setIsLoaded(true)
}
useEffect(() => {
getLocations();
}, [])
const defaultLocation = {
center: {
lat: 55.9579741,
lng: -3.1966372,
},
zoom: 13
}
return (
<>
{ isLoaded &&
<Box style={styleMap}>
<GoogleMapReact
bootstrapURLKeys={{ key: import.meta.env.VITE_GOOGLEMAPS_API_KEY }}
yesIWantToUseGoogleMapApiInternals
defaultCenter={defaultLocation.center}
defaultZoom={defaultLocation.zoom}>
{locations.map((place) => (
<LocationPin
key={place.id}
text={place.title}
lat={parseFloat(place.lat)}
lng={parseFloat(place.lng)}
/>
))}
</GoogleMapReact>
</Box>
}
</>
)
from google-map-react.
Any updates/fixes?
from google-map-react.
any fixes?
from google-map-react.
Same issue
from google-map-react.
Facing same issue
from google-map-react.
Same issue. Follwing...
from google-map-react.
Use the forked project mentioned above. That works.
from google-map-react.
Any update? Following...
from google-map-react.
A word of caution: Strict mode is there for a reason and disabling it not a risk worth taking in a production app, in my opinion.
True , This is a major issue , But this repo is not active now.
from google-map-react.
The best solution here is to switch to the best map library - Mapbox. However, if you're forced to use google maps like me - the only option is to use their official react-wrapper library and forget about declarative React API
from google-map-react.
This was my solution: https://github.com/giorgiabosello/google-maps-react-markers
from google-map-react.
I have this with Next.js in dev mode. When I build the app and run the production build, it works fine. Maybe it has to do with some reload mechanism that is employed only in dev mode.
from google-map-react.
I have this with Next.js in dev mode. When I build the app and run the production build, it works fine. Maybe it has to do with some reload mechanism that is employed only in dev mode.
This seems to have solved my issue. It appears to be related to hot reloading in NextJs.
from google-map-react.
I solved this issue in Index.js. import ReactDom from "react-dom" instead of "react-dom/client"
from google-map-react.
This does not work in development because of the React.StrictMode, but when you build it works good. At least for me.
from google-map-react.
Related Issues (20)
- 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
- Marker not showing, using React 18 HOT 1
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.