Map Pins are not positioned correctly after zoom or pan

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

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

@ruthoferroman

@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.

@ShwetKhatri2001

@ShwetKhatri2001 yes exactly

So, are there any possible solutions available?

Same issue

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

+1

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

@Huetarded

@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

Is there an update on that topic?

@alvamanu

@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?

Navigation Menu

Repository navigation

Map Pins are not positioned correctly after zoom or pan #1204

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Map Pins are not positioned correctly after zoom or pan #1204

Description

Activity

SimonClo commented on Oct 30, 2023

ShwetKhatri2001 commented on Nov 3, 2023

ruthoferroman commented on Nov 3, 2023

Hardikbhadru commented on Nov 3, 2023

ArtISTTT commented on Nov 3, 2023

Huetarded commented on Nov 5, 2023

rnkdsh commented on Nov 6, 2023

Huetarded commented on Nov 6, 2023

alvamanu commented on Nov 9, 2023

Anjana-lakshan commented on Dec 5, 2023

Eugene-Mokrushin commented on Dec 17, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions