Google-Maps-API

🗺️ Google Maps React Integration: Clusters, Markers, InfoWindows & Polygons

Description:

This repository contains a fully functional Google Maps integration using @vis.gl/react-google-maps in a React application. It includes:

✅ Clustered Markers: Efficiently groups markers when zoomed out to improve performance and readability.

✅ Search Bar with Country Selection: Users can search for a country, and it will be highlighted on the map.

✅ Polygon Overlays: When a country is selected, its boundary is displayed using a polygon.

✅ State-Level Interactions: Clicking on a state displays an InfoWindow with relevant details.

✅ Dynamic Data Integration: Preloaded donation-related data dynamically appears on interactions.

✅ Smooth Performance: Optimized rendering for fast and interactive maps.

Steps.

Please use Maps.tsx as a component and setup the rest of the files.

/app/components/maps

Polygon.jsx Polyline.jsx I have added a demo json file from

https://geojson-maps.kyd.au/

/public/maps/

custom.geoindia.json (contains GeoJson) marker.js (contains data of the markers)