Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Marker icons are showing along with marker cluster

Đang mở
  • Có gì không ổn?
#408 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu với component GoogleMaps được cung cấp, đặc biệt là phần thiết lập Marker, useMarkerRef, InfoWindow và MarkerClusterer. Tái hiện ví dụ với các phiên bản thư viện và Google Maps đã nêu, sau đó xác minh rằng việc clustering không để các marker riêng lẻ vẫn hiển thị và việc mở một cửa sổ thông tin khác sẽ đóng cửa sổ trước đó.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
1.9k
Fork
195
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của visgl/react-google-maps

Tất cả issue của visgl/react-google-maps

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.