javascript - Dynamic loading of Markers on Google Maps -

i want dynamically load markers on google map, mysql database. markers in 20km radius of center of map should appear , center of map changed/panned old markers lying outside 20km radius should disappear , new markers within 20km radius of new center should appear.

right able load markers in 20km radius of center of map once webpage opened.

any suggestive tutorial or same

1. bind center_changed event listener on map object.
2. when create markers, push them array (push each marker object).
3. on center change (#1), loop through markers array , call setmap(null) on each marker.
4. query database again new center coordinates.
5. follow each step again #2

here quick code idea:

// create array of markers var markers = [];  // create map , stuff need  // bind event listener google.maps.event.addlistener(map, 'center_changed', reloadmarkers);  // function reload markers function reloadmarkers() {      (var = 0; < markers.length; i++) {          // remove each marker map         markers[i].setmap(null);     }      createmarkers(); }  function createmarkers() {      // query database parameters need     // create each marker object (probably within loop)      var marker = new google.maps.marker({         map: map,         // other marker properties here     });      // push new marker markers array     markers.push(marker); } 

hope helps.