Two tooltips/dailog when clicking on marker

[ahsaanshuja]

when I click on marker it shows two tooltips/dailog I am using "@react-google-maps/api": "^2.19.2" in Next js typescript

my code is:

` import { GoogleMap, InfoWindow, LoadScript, MarkerF, Marker, } from '@react-google-maps/api'; import { FC, useState } from 'react'; const containerStyle = { width: '100%', height: '500px', };

const markers = [ { id: 1, name: 'Chicago, Illinois', position: { lat: 41.881832, lng: -87.623177 }, }, { id: 2, name: 'Denver, Colorado', position: { lat: 39.739235, lng: -104.99025 }, }, { id: 3, name: 'Los Angeles, California', position: { lat: 34.052235, lng: -118.243683 }, }, { id: 4, name: 'New York, New York', position: { lat: 40.712776, lng: -74.005974 }, }, ]; const MapComponent: FC = () => { const [activeMarker, setActiveMarker] = useState(); const handleActiveMarker = (marker: number) => { if (marker === activeMarker) { return undefined; } setActiveMarker(marker); }; const handleOnLoad = (map: google.maps.Map) => { const bounds = new google.maps.LatLngBounds(); markers.forEach(({ position }) => bounds.extend(position)); map.fitBounds(bounds); };

return (

{markers.map(({ id, name, position }) => ( handleActiveMarker(id)} > {activeMarker === id ? ( setActiveMarker(undefined)} >

{name}

) : null} ))}

); };

export default MapComponent `

Here is the image of this issue

[davidarny]

Try to remove <React.StrictMode> around your app component

[vojtech-cerveny]

^^ Same issue with NextJS, StrictMode off doesn't work

import React, { useState } from "react";
import { InfoWindow, MarkerF } from "@react-google-maps/api";

interface MyMarkerProps {
  position: {
    lat: number;
    lng: number;
  };
  content: string;
}

const MyMarker: React.FC<MyMarkerProps> = ({ position, content }) => {
  const [isOpen, setIsOpen] = useState(false);

  const onToggleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
    <MarkerF position={position} onClick={onToggleOpen}>

    </MarkerF>
    {isOpen && (
        <InfoWindow onCloseClick={onToggleOpen} position={position}>
          <div className="p-2">
            <p className="text-sm text-gray-700">{content}</p>
          </div>
        </InfoWindow>
      )}
    </>
  );
};

export default MyMarker;

package.json

{
  "name": "ba-cache",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-google-maps/api": "^2.19.2",
    "@types/node": "20.6.3",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
    "eslint": "8.50.0",
    "eslint-config-next": "13.5.2",
    "next": "13.5.2",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@types/google-map-react": "^2.1.8"
  }
}

generates this image after clicking

[impartdan]

I have the same problem. Any idea what could be causing this?

[ahsaanshuja]

Solution https://stackoverflow.com/a/77055881/13492516