Dynamic loading of Markers on Google Maps

Question

I want to Dynamically load markers on google map, from Mysql database. The markers in 20Km radius of center of map should appear and as the center of the map is changed/panned the old markers lying outside the 20Km radius should disappear and new markers within 20Km radius of new center should appear.

Right now I am able to load markers with in 20km radius of center of map but only for once the webpage is opened.

Any suggestive tutorial or help for the same

What calculation do you use on the server (for the database)? — Emmanuel Delay
– Emmanuel Delay, Commented Nov 13, 2014 at 9:49

MrUpsidown · Accepted Answer · 2014-11-13 10:40:22Z

Bind a center_changed event listener on the map object.
When you create your markers, push them to an array (push each marker object).
On center change (#1), loop through your markers array and call setMap(null) on each marker.
Query your database again with the new center coordinates.
Follow each step again from #2

Here is some quick code so that you get the idea:

// Create an array of markers var markers = []; // Create your map and all the stuff you need // Bind the event listener google.maps.event.addListener(map, 'center_changed', reloadMarkers); // Function to reload the markers function reloadMarkers() { for (var i = 0; i < markers.length; i++) { // Remove each marker from map markers[i].setMap(null); } createMarkers(); } function createMarkers() { // Query your database with the parameters you need // Create each marker object (probably within a loop) var marker = new google.maps.Marker({ map: map, // Your other marker properties here }); // Push new marker to the markers array markers.push(marker); }

Hope this helps.

Collectives™ on Stack Overflow

Dynamic loading of Markers on Google Maps

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related