the custom marker change position whenever i zoom or drag the map

[george-steven0]

here is the code i'm using i dont know if there is something wrong i'm doing here but everything is rendered and works fine except the markers they keep change position when drag the map to any direction or when zoom in/out the map

here is the code i'm using below.

import GoogleMapReact from 'google-map-react';
import GoogleMap from 'google-map-react';
import { HiOutlineLocationMarker } from 'react-icons/hi';
import { useCallback, useEffect, useState } from 'react';

const MapMarker = ({ lat,lng, text }) => {
const greatPlaceStyle = {
position: 'absolute',
transform: 'translate(-50%, -50%)'
}

return(
  <div style={{...greatPlaceStyle, top : lat, left:lng }}>{text}</div>
)

}

const MapComponent = () => {
const path = [{ lat: 30.0444, lng: 31.2357 }, { lat: 30.2001, lng: 29.9187 }]

const mapOptions = {
    center: { lat: 30.0444, lng: 31.2357 },
    zoom: 7,
    language : 'en',
    zoomControl: true,
    fullscreenControl: true,
    mapTypeControl: true,
    streetViewControl: true,
};

const handleApiLoaded = (map, maps) => {
    const line = new maps.Polyline({
        path: path,
        geodesic: true,
        strokeColor: '#3454b6',
        strokeOpacity: 1.0,
        strokeWeight: 6,
    });

    line.setMap(map);
};


return ( 
    <>
        <GoogleMapReact
            bootstrapURLKeys={{ key: "",v: '3.31'  }}
            defaultCenter={mapOptions.center}
            defaultZoom={mapOptions.zoom}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
        >

        {path?.map( (item,index)=>(
            <MapMarker
                key={index}
                lat={item.lat}
                lng={item.lng}
                text={<HiOutlineLocationMarker className="text-3xl text-mainRed" />}
            /> 
        ) )}
           
    </>
 );

}

export default MapComponent;

[sumankalia]

facing the same issue as well

[dorakadri]

same ,and just an advice remove ur key from the post ihope the creator respond i've been trying to make it work 1week now all my project depend on this

[george-steven0]

same ,and just an advice remove ur key from the post ihope the creator respond i've been trying to make it work 1week now all my project depend on this

Thank you for your advice I did remove the key

[dorakadri]

did you find a solution ?

[mertcankose]

I have a same problem my custom marker change position when i zoom in and zoom out.

[dorakadri]

i think its a problem in the library cause look their is somehow a div that the marker is on and it moves the marker with it i hope they fix it or atleast they respond us the tranform position absolute dont work either

[george-steven0]

did you find a solution ?

No not yet, unfortunately

[dorakadri]

i switched to this library at it works perfectly google-maps-react-markers

[ahsuniqbal]

Facing the same issue, did anyone find any solution?

[mainrs]

@george-steven0 your key is still there. You have to click on the "edited" button and delete the old entry. At this point your key is compromised. You should just generate a new one and discard this one.

[unimonkiez]

I have that issue too! Will probably do @dorakadri if no solution is found

[DeepanshuRKM]

I am also facing the same issue. @dorakadri could you please debug the library as per required?

[dorakadri]

the library allow u to display ur marker as component here an exemple : <GoogleMap
apiKey={}
onGoogleApiLoaded={onGoogleApiLoaded}
defaultZoom={14}
center={{ lat: Number(coords?.lat), lng: Number(coords?.lng) }}
defaultCenter={{ lat: Number(coords?.lat), lng: Number(coords?.lng) }}
options={{
streetViewControl: true,
fullscreenControl: true,
disableDefaultUI: true,
zoomControl: true,
styles: mapStyles,
}}
>


pulse its a normal react component you just need to add the lat and lng and u dont need to receive it as props in the component

[DeepanshuRKM]

@dorakadri Yes, we are able to display the marker but the issue remains. Issue still remains. It makes more bad impact on phones when users pinch in or out of the map. Could you please do the needful in the library or suggest any change?

[dorakadri]

I completely changed the library its not this one its another one forget about this one

[ElsaMarziano]

Is there an update on the subject? I'm facing the same problem

[AliasPedroKarim]

Me too !!

[AEidSPL]

try this to marker div :
style={{
position: "absolute",
top: "100%",
left: "50%",
height: "24px",
width: "24px",
transform: "translate(-50%, -100%)",
}}

[Anjana-lakshan]

Is there an update on that topic?

[ElsaMarziano]

I ended up using another library - google-maps-react-marker. It's doing pretty much the same job and worked fine for me

[CharlieGroves]

try this to marker div : style={{ position: "absolute", top: "100%", left: "50%", height: "24px", width: "24px", transform: "translate(-50%, -100%)", }}

@AEidSPL worked for me! thanks