Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Marker icons are showing along with marker cluster

オープン
  • 何か問題がありますか？
#408 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
react, typescript
領域
frontend, web-dev

調査の方向性

提供された GoogleMaps コンポーネントから始め、特に Marker、useMarkerRef、InfoWindow、MarkerClusterer の設定を確認してください。指定されたライブラリと Google Maps のバージョンで例を再現し、クラスタリングによって個々のマーカーが表示されたままにならないこと、別の情報ウィンドウを開くと前のウィンドウが閉じることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

bug
Description

When loading my custom google map component, marker cluster is getting created but with that actual markers are also getting drown. Providing screenshot below:

image

Expected result: It should show only marker clusters

Also I didn't see any documentation on how can we close one marker info window programmatically, when I am opening another marker info window.

Steps to Reproduce

Below is my code:

import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { Map, Marker, InfoWindow, useMap, useMarkerRef } from '@vis.gl/react-google-maps';
import { MarkerClusterer } from '@googlemaps/markerclusterer';

export default function GoogleMaps({ markerData, defaultZoom = 4, defaultCenter = { lat: 17.3850, lng: 78.4867 }, mapHeight }) {

    const map = useMap();
    const assetClusterer = useRef(null);

    useEffect(() => {
        if (!map) return;
        if (markerData?.length) {
            const bounds = new window.google.maps.LatLngBounds();
            markerData.forEach(({ latitude, longitude }) => {
                bounds.extend({ lat: latitude, lng: longitude });
            });
            map.fitBounds(bounds);
            map.panToBounds(bounds);
        }
        if (!assetClusterer.current) {
            assetClusterer.current = new MarkerClusterer({ map });
        }
    }, [map]);

    const AssetMarkers = () => {
        const [assetMarkers, setAssetMarkers] = useState({});

        useEffect(() => {
            assetClusterer.current?.clearMarkers();
            assetClusterer.current?.addMarkers(Object.values(assetMarkers));
        }, [assetMarkers]);

        const setMarkerRef = (marker, key) => {
            if (marker && assetMarkers[key]) return;
            if (!marker && !assetMarkers[key]) return;

            setAssetMarkers(prev => {
                if (marker) {
                    return { ...prev, [key]: marker };
                } else {
                    const newMarkers = { ...prev };
                    delete newMarkers[key];
                    return newMarkers;
                }
            });
        };

        const AssetMarker = ({ point, setMarkerRef }) => {
            const [infoWindowShown, setInfoWindowShown] = useState(false);
            let [markerRef, marker] = useMarkerRef();

            const refCallback = useCallback((marker1) => {
                if (!marker1) return;
                markerRef(marker1);
                setMarkerRef(marker1, point.deviceSN);
            }, [setMarkerRef, point.deviceSN]);

            const handleAssetMarkerClick = useCallback(() => {
                setInfoWindowShown(true);
            }, []);

            const handleInfoWindowClose = useCallback(() => setInfoWindowShown(false), []);
            return (
                <>
                    <Marker
                        position={{ lat: point.latitude, lng: point.longitude }}
                        ref={refCallback}
                        onClick={handleAssetMarkerClick} />
                    {
                        infoWindowShown && <InfoWindow anchor={marker} onClose={handleInfoWindowClose}>
                            <h2>InfoWindow content!</h2>
                            <p>Some arbitrary html to be rendered into the InfoWindow.</p>
                        </InfoWindow>
                    }
                </>
            )
        }

        return (
            <>
                {
                    markerData.map((objMarker) => (
                        <AssetMarker key={objMarker.deviceSN} point={objMarker} setMarkerRef={setMarkerRef} />
                    ))
                }
            </>
        )
    }

    return (
        <Map style={{ width: '100%', height: mapHeight }} defaultZoom={defaultZoom} defaultCenter={defaultCenter} streetViewControl={false} gestureHandling="greedy">
            <AssetMarkers />
        </Map>
    )
}
Environment
  • Library version: 1.0.2
  • Google maps version: weekly
  • Browser and Version: Chrome
  • OS: Window 10
Logs

No response

主要言語
TypeScript
スター
1.9k
フォーク
195
平均マージ
2日 18時間
マージ済み PR（30日）
15

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

visgl/react-google-maps のほかの issue

visgl/react-google-maps の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。