Map Pins are not positioned correctly after zoom or pan

[ruthoferroman]

Describe the bug 🐛

My map pins are rendered on the correct position initally. They aren't positioned correct as soon as i zoom or pan the map.

To Reproduce 🔍

Steps to reproduce the behavior:

import React from "react";
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div style={{
  color: 'white', 
  background: 'grey',
  padding: '15px 10px',
  display: 'inline-flex',
  textAlign: 'center',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '100%',
  transform: 'translate(-50%, -50%)'
}}>{text}</div>;

export default class SimpleMap extends React.Component { 
  static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };
  render() {
  return (
    // Important! Always set the container height explicitly
    <div style={{ height: '200px', width: '200px' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "xxx" }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
      >
        <AnyReactComponent 
          lat={59.955413} 
          lng={30.337844} 
          text={'Kreyser Avrora'} 
        />
      
      </GoogleMapReact>
    </div>
  );}
}

Expected behavior 💭

Map Pins shall be repositioned according to their langitude and lotitude properties after zoom or pan.

Environment:

• OS: windows
• Browser: edge

[SimonClo]

I have the same issue
I'm using nextJs 13, on Brave or Chrome browsers

[ShwetKhatri2001]

@ruthoferroman Are you facing this issue ? When the mouse drag is completed, the pins are again coming on center of the map which is not the correct location after drag.

[ruthoferroman]

@ShwetKhatri2001 yes exactly

[Hardikbhadru]

So, are there any possible solutions available?

[ArtISTTT]

Same issue

[Huetarded]

Same here - Loads in the correct location initially, but after moving the map, the pins will snap to their original location relative to the map's container and disregard any changes made to the map's position or zoom

[rnkdsh]

+1

[Huetarded]

I had to abandon the use of this library due to this problem. Thankfully, Google just released their own React components a few days ago and they work like a charm!

Project

Blog Post

[alvamanu]

@Huetarded @rnkdsh @ArtISTTT @Hardikbhadru @ruthoferroman @SimonClo

NextJS renders twice. If you do reactstrictmode:false inside next.config.js, it solves the issue. Not sure if it's the best option, but according to chatgpt, there are other solutions. The following is the convo I had with open ai, where it presents other solutions. Maybe one of them might help you better (scroll down to the last two comments):

https://chat.openai.com/share/2f9a680a-3112-4ee0-b7dc-0f6e9c1e0d7d

[Anjana-lakshan]

Is there an update on that topic?

[Eugene-Mokrushin]

@alvamanu
Indeed, solved the issue while moving the map. Thanks!
Although, there are after-images on drag for a split second. Were you able to solve this issue?

+1
{
"google-map-react": "^2.2.1",
"react-scripts": "5.0.1"
}