I’m trying to do make a map with some POI and everything works fine except when I want to add a Marker Clusterer. In fact, I can see the cluster and interact with it, but instead of showing the number of makers inside the clusterer, it just shows a dot… Image of my current webapp.
I think the problems is here because I’m using JS instead of TS. So I tried to modify the code in the tutorial of google maps (https://developers.google.com/codelabs/maps-platform/maps-platform-101-react-js#0) but I may have made a mistake…
Also, here’s my code:
import {
APIProvider,
Map,
AdvancedMarker,
Pin,
useMap,
} from "@vis.gl/react-google-maps";
import { MarkerClusterer, ClusterIconStyle } from "@googlemaps/markerclusterer";
export default function MapInterface({ setTableView }) {
//------------- POLYGONS DATA -------------
const encode = require("geojson-polyline").encode;
const regSimpData = regSimp.features;
const encodedRegSimp = regSimpData.map((reg) => encode(reg.geometry));
const tableButtonClickHandler = () => {
setTableView(true);
};
//------------- DATA -------------
const initialData = [
{ key: "operaHouse", location: { lat: -33.8567844, lng: 151.213108 } },
{ key: "tarongaZoo", location: { lat: -33.8472767, lng: 151.2188164 } },
{ key: "manlyBeach", location: { lat: -33.8209738, lng: 151.2563253 } },
{ key: "hyderPark", location: { lat: -33.8690081, lng: 151.2052393 } },
{ key: "theRocks", location: { lat: -33.8587568, lng: 151.2058246 } },
{ key: "circularQuay", location: { lat: -33.858761, lng: 151.2055688 } },
{ key: "harbourBridge", location: { lat: -33.852228, lng: 151.2038374 } },
{ key: "kingsCross", location: { lat: -33.8737375, lng: 151.222569 } },
{ key: "botanicGardens", location: { lat: -33.864167, lng: 151.216387 } },
{ key: "museumOfSydney", location: { lat: -33.8636005, lng: 151.2092542 } },
{ key: "maritimeMuseum", location: { lat: -33.869395, lng: 151.198648 } },
{
key: "kingStreetWharf",
location: { lat: -33.8665445, lng: 151.1989808 },
},
{ key: "aquarium", location: { lat: -33.869627, lng: 151.202146 } },
{ key: "darlingHarbour", location: { lat: -33.87488, lng: 151.1987113 } },
{ key: "barangaroo", location: { lat: -33.8605523, lng: 151.1972205 } },
];
//------------- MARKERS -------------
const BordeauxMarkers = ({ pois }) => {
const map = useMap();
const [markers, setMarkers] = useState({});
const clusterer = useRef(null);
// Initialize MarkerClusterer, if the map has changed
useEffect(() => {
if (!map) return;
if (!clusterer.current) {
clusterer.current = new MarkerClusterer({
map: map,
});
}
}, [map]);
// Update markers, if the markers array has changed
useEffect(() => {
if (!clusterer.current) return;
clusterer.current.clearMarkers();
clusterer.current.addMarkers(Object.values(markers));
}, [markers]);
const setMarkerRef = (marker, key) => {
if (marker && markers[key]) return;
if (!marker && !markers[key]) return;
setMarkers((prev) => {
if (marker) {
return { ...prev, [key]: marker };
} else {
const newMarkers = { ...prev };
delete newMarkers[key];
return newMarkers;
}
});
};
console.log(markers);
return (
<>
{pois.map((poi) => (
<AdvancedMarker
key={poi.key}
position={poi.location}
ref={(marker) => setMarkerRef(marker, poi.key)}
>
<Pin
background={"#FBBC04"}
glyphColor={"#000"}
borderColor={"#000"}
/>
</AdvancedMarker>
))}
</>
);
};
//------------- CLUSTERS -------------
return (
<>
<Flex position={"relative"} bgColor={"transparent"}>
<Flex h="850px" w="vw" position={"absolute"} top={0} left={0}>
<APIProvider
apiKey={"APIKEY"}
onLoad={() => console.log("Maps API has loaded.")}
>
<Map
defaultZoom={6}
defaultCenter={{ lat: 46.757285, lng: 2.2329292 }}
mapId="MAP ID"
onCameraChanged={(ev) =>
console.log(
"camera changed:",
ev.detail.center,
"zoom:",
ev.detail.zoom
)
}
>
<BordeauxMarkers pois={initialData} />
<Polygon encodedPaths={encodedRegSimp[0].coordinates} />
<Polygon encodedPaths={encodedRegSimp[1].coordinates} />
<Polygon encodedPaths={encodedRegSimp[2].coordinates} />
<Polygon encodedPaths={encodedRegSimp[3].coordinates} />
<Polygon encodedPaths={encodedRegSimp[4].coordinates} />
<Polygon encodedPaths={encodedRegSimp[5].coordinates} />
<Polygon encodedPaths={encodedRegSimp[6].coordinates[0]} />
<Polygon encodedPaths={encodedRegSimp[7].coordinates[0]} />
<Polygon encodedPaths={encodedRegSimp[8].coordinates[0]} />
<Polygon encodedPaths={encodedRegSimp[9].coordinates[0]} />
<Polygon encodedPaths={encodedRegSimp[10].coordinates} />
<Polygon encodedPaths={encodedRegSimp[11].coordinates[0]} />
<Polygon encodedPaths={encodedRegSimp[12].coordinates} />
</Map>
</APIProvider>
</Flex>
<Flex w="80%"></Flex>
<Flex justifyContent={"end"} w="full" marginX="2%" marginY="2%">
<Group attached={true}>
<Button variant={"solid"} onClick={tableButtonClickHandler}>
Table
</Button>
<Button variant={"solid"} disabled>
Map
</Button>
</Group>
</Flex>
</Flex>
</>
);
}
I don’t really don’t know what’s wrong because my code seems the same as the one in the tutorial, except it’s in JS. I tried to modify the render but it didn’t change anything and I have watch other tutorials but that didn’t help me. Also, I didn’t really get how the ref tag works in the AdvancedMarker component…
Thanks in advance!
