Google Maps markers become very slow when adding more than 1000 markers – how to optimize?

Question

I’m using the Google Maps JavaScript API to display markers on a map. When I add more than ~1000 markers, the map becomes very slow (zooming, panning, and rendering markers lag significantly). What is the best approach for doing this ? because in my project its necessary to show huge volume of markers. This is how i generate the map with locations, ``` export type LocationStatus = | 'ACTIVE' | 'INACTIVE' | 'PENDING' | 'ERROR' | 'MAINTENANCE' | 'OFFLINE' export interface LocationFeatureProperties { id: number name: string status: LocationStatus } export interface LocationFeatureGeometry { type: 'Point' /** * [lng, lat] */ coordinates: [number, number] } export interface LocationFeature { type: 'Feature' properties: LocationFeatureProperties geometry: LocationFeatureGeometry } export interface LocationFeatureCollection { type: 'FeatureCollection' features: LocationFeature[] } const STATUSES: LocationStatus[] = [ 'ACTIVE', 'INACTIVE', 'PENDING', 'ERROR', 'MAINTENANCE', 'OFFLINE', ] /** * Generate a large but structured dataset of locations. * This avoids a massive hand-written JSON blob while still simulating a big recordset. */ function generateLocationsFeatureCollection(): LocationFeatureCollection { const features: LocationFeature[] = [] // Base center roughly around San Francisco const baseLat = 37.7749 const baseLng = -122.4194 // Create a grid of points with varying statuses // 20 x 15 = 300 points const rows = 20 const cols = 50 const latStep = 0.01 const lngStep = 0.01 let id = 1 for (let r = 0; r < rows; r += 1) { for (let c = 0; c < cols; c += 1) { const statusIndex = (r * cols + c) % STATUSES.length const status = STATUSES[statusIndex] const lat = baseLat + r * latStep const lng = baseLng + c * lngStep const feature: LocationFeature = { type: 'Feature', properties: { id, name: `Location ${id}`, status, }, geometry: { type: 'Point', coordinates: [lng, lat], }, } features.push(feature) id += 1 } } return { type: 'FeatureCollection', features, } } export const locationsFeatureCollection: LocationFeatureCollection = generateLocationsFeatureCollection() ``` ``` import { useEffect, useMemo, useState, useRef } from 'react' import { Loader } from '@googlemaps/js-api-loader' import { locationsFeatureCollection, type LocationFeature, type LocationStatus, } from './data/locationsData.ts' import './App.css' type FilterStatus = LocationStatus | 'ALL' const STATUS_OPTIONS: FilterStatus[] = [ 'ALL', 'ACTIVE', 'INACTIVE', 'PENDING', 'ERROR', 'MAINTENANCE', 'OFFLINE', ] const STATUS_COLORS: Record = { ACTIVE: '#28a745', INACTIVE: '#6c757d', PENDING: '#ffc107', ERROR: '#dc3545', MAINTENANCE: '#17a2b8', OFFLINE: '#6610f2', } /** * Google Map page that: * - Loads a large dataset into the Google Maps Data Layer * - Filters markers instantly by status using styling */ export function GoogleMapDataLayerPage() { const [selectedStatus, setSelectedStatus] = useState('ALL') const mapRef = useRef(null) const dataLayerRef = useRef(null) const infoWindowRef = useRef(null) const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY as string | undefined const features = useMemo( () => locationsFeatureCollection.features, [], ) useEffect(() => { if (!apiKey) { // eslint-disable-next-line no-console console.warn( 'VITE_GOOGLE_MAPS_API_KEY is not set. Map will not be displayed.', ) return } let isCancelled = false const loader = new Loader({ apiKey, version: 'weekly', }) loader .load() .then((googleMaps) => { if (isCancelled) return if (!mapRef.current) { const mapContainer = document.getElementById('map') if (!mapContainer) { return } const firstFeature = features[0] const [lng, lat] = firstFeature.geometry.coordinates const map = new googleMaps.maps.Map(mapContainer, { center: { lat, lng }, zoom: 11, mapTypeId: googleMaps.maps.MapTypeId.ROADMAP, }) mapRef.current = map dataLayerRef.current = map.data infoWindowRef.current = new googleMaps.maps.InfoWindow() map.data.addGeoJson(locationsFeatureCollection as any) map.data.addListener('click', (event) => { const feature = event.feature const name = feature.getProperty('name') as string | undefined const status = feature.getProperty('status') as | LocationStatus | undefined const position = event.latLng if (!position || !infoWindowRef.current) return const html = ` ${name ?? 'Unknown location'} ${ status ? `Status: ${status}` : 'Status: N/A' } ` infoWindowRef.current.setContent(html) infoWindowRef.current.setPosition(position) infoWindowRef.current.open({ map, }) }) } }) .catch((error) => { // eslint-disable-next-line no-console console.error('Error loading Google Maps JS API', error) }) return () => { isCancelled = true } }, [apiKey, features]) useEffect(() => { const dataLayer = dataLayerRef.current if (!dataLayer) return dataLayer.setStyle((feature) => { const status = feature.getProperty('status') as LocationStatus | undefined const isVisible = selectedStatus === 'ALL' || (status != null && status === selectedStatus) const color = status && STATUS_COLORS[status as LocationStatus] ? STATUS_COLORS[status as LocationStatus] : '#007bff' const style: google.maps.Data.StyleOptions = { visible: isVisible, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 4, fillColor: color, fillOpacity: 0.9, strokeColor: '#ffffff', strokeWeight: 1, }, } return style }) }, [selectedStatus]) const visibleCount = useMemo(() => { if (selectedStatus === 'ALL') { return features.length } return features.filter( (f) => f.properties.status === selectedStatus, ).length }, [features, selectedStatus]) return ( Google Map – Data Layer Demo Status: setSelectedStatus(event.target.value as FilterStatus) } > {STATUS_OPTIONS.map((statusOption) => ( {statusOption} ))} Showing {visibleCount} locations {!apiKey ? ( Set VITE_GOOGLE_MAPS_API_KEY in a .env file to load the map. ) : ( )} ) } export default GoogleMapDataLayerPage ```

Google Maps markers become very slow when adding more than 1000 markers – how to optimize?

Related Questions

Same Tag Questions

Popular Questions

0 Answers