Get features present in map viewport from geoJSON - google-maps

Question

I need to add markers on the map for the data that I have.
Out of the thought process, I went through map.data.loadGeoJson('google.json'); with which I will be able to have custom data attached to the map. Now, there is a requirement that I need to show properties of the features present in the map viewport. I cannot loop through all the items and check for .contains(), I have a huge data. Is there default google way to get the properties of the features present in the map viewport?

Answer 1

I like using TurfJS for tasks like these. I've tested it w/ 1M points and it works more quickly than one'd expect.
Pseudocode
load your GeoJSON once and initialize it as a turf feature collection
transform your map viewport's bounds into a GeoJSON polygon
run the pointsWithinPolygon function
pass the resulting feature collection onto the map data layer using addGeoJson
rinse & repeat within a throttled bounds_changed event
Actual Code
/*
You'd load your own geojson like so:
const points = turf.featureCollection(geojsonObject.features)
*/
// random 1M points as a demo
const points = turf.randomPoint(1e6, {
bbox: [-180, -90, 180, 90]
});
const {
west,
south,
east,
north
} = map.getBounds().toJSON();
// extent in minX, minY, maxX, maxY order
const viewport_as_polygon = turf.bboxPolygon([west, south, east, north])
const points_within = turf.pointsWithinPolygon(points, viewport_as_polygon)
Note: Since none of this interacts with the DOM until you call addGeoJSON, it's gonna be faster than for instance generating markers for each feature and then hiding/modifying the transparency of those that are outside of the viewport.