how to load markers if their location is what is displayed on screen using Google maps api or gmaps.js

Question

i have a bunch of markers that i want to add to a map dynamically.

I am getting this markers from a database as a json object and placing them on the map, when the map loads

The map i have is in a div 300px x 300px.

The issue i'm trying to solve is that i only want to load the markers that are on the visible part of the map.

I know the lat and long of each marker so the question is how do i find the area that is displayed on the screen, and maybe the lat and long ranges.

If i pan the map i want the are to update so i can show more markers...

not sure if this makes sense :)

any ideas on this issue ?

Answer 1

observe the bounds_changed-event of the map. When it fires , you may use the contains-method of the bounds of the map(returned by mapInstance.getBounds() ) to filter the markers .