I'm using google maps for a web site development. There are a lot of markers in my database. I want to load markers that are in the area that is shown in the current map. And when the zooming changes the number of markers should also adjust accordingly. What's the best approach? Thanks in advance!

I'm using google maps for a web site development. There are a lot of markers in my database. I want to load markers that are in the area that is shown in the current map. And when the zooming changes the number of markers should also adjust accordingly. What's the best approach? Thanks in advance!

• javascript
• google-maps
• google-maps-api-3

• Why would you need to remove a marker if it's not in view? I think you need to explain the end goal of this. – DBS Commented Jun 11, 2016 at 16:31

2 Answers 2

Use the bound

    aNord   =   this.map.getBounds().getNorthEast().lat();  
    aEst    =   this.map.getBounds().getNorthEast().lng();
    aSud    =   this.map.getBounds().getSouthWest().lat();  
    aOvest  =   this.map.getBounds().getSouthWest().lng();  

for filter (server side ) data from database (in this case php)

 "select lat, lng 
  from your_table 
  where lat >= $minLat 
  AND lat <= $maxLat
  AND lng <= $maxLng
  AND lng >= $minLng";

You can also use bounds_changed function to add or remove data when user changes zoom level or pan the map.

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat:41.082774, lng: 28.86821},
      disableDefaultUI: true
    });

    google.maps.event.addListener(map, 'bounds_changed', function() {
    aNord   =   map.getBounds().getNorthEast().lat();  
    aEst    =   map.getBounds().getNorthEast().lng();
    aSud    =   map.getBounds().getSouthWest().lat();  
    aOvest  =   map.getBounds().getSouthWest().lng();  
    });