1

I have a lot of markers (around 3000) in Google Map and they are with icon and advanced details in popup. That is why, map opens very late, also all markers load very late. Because I load all markers list from database and display them with foreach loop in one time.

Now I think to load markers part by part when navigate (slide) the map.

For example, if I am in Region1, I can see markers only in Region1, when I navigate (slide) the map to Region2, to load only markers in Region2

Please, any ideas, sample or link for this. Does Google Maps API has navigate events?

Improve this question
2
  • where/how did you store the details for the markers? Commented Aug 23, 2013 at 12:28
  • I store marker details data at database. Commented Aug 23, 2013 at 13:03

3 Answers 3

Reset to default
5

You can register map events for center and zoom level changes then load markers if they are in the current viewport:

function loadMarker() { // Get the center lat/lng of the map var center = map.getCenter(); // Get the size of the map viewport var bounds = map.getBounds(), var cor1 = bounds.getNorthEast(), var cor2 = bounds.getSouthWest(), var cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), var cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), var width = spherical.computeDistanceBetween(cor1,cor3), var height = spherical.computeDistanceBetween( cor1, cor4); // Loop through your markers for(var i=0; i < <size of your marker array>; i++) { // Get the distance between the center of the map and your markers var distanceFromMarker = google.maps.geometry.spherical.computeDistanceBetween(center, <marker lat/lng>); if(distanceFromMarker <= width || distanceFromMarker <= height) { <load marker> } } } // Register center and zoom level change events google.maps.event.addListener(map, 'center_changed', loadMarker); google.maps.event.addListener(map, 'zoom_changed', loadMarker);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

The google website has a page dedicated to this issue with different approaches to improve performance: https://developers.google.com/maps/articles/toomanymarkers

The chapter "Viewport Marker Management" in particular should contain some useful information about how to implement what you describe.

Improve this answer

Comments

2

You may request the marker-details based on the bounds of the map on demand from the DB(e.g. on bounds_changed) .

Optimally your DB should support spatial queries(but it's not required)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.