CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user1001506
user1001506

Reputation:

Load markers map after page has loaded

What am trying to do is, load a google map on a page, then load up my markers one by on so the user is seeing as they become available. Am doing this on purpose because I want to show how much my site covers in a city. Now I have tried loading them before the page loads but that takes ages! (I have 600+ markers and growing)

I have the basic knowledge to display a map, load markers but this need a different approach which I need some help with. If any one could point me to a tutorial or some reference page to help me get started would be a huge help.

Upvotes: 0

Views: 813

Answers (3)

Marcelo
Marcelo

Reputation: 9407

Load a few markers at a time with calls to setTimeout, for example:

//Global variable
var markersData = [];

markersData[0] = {
    "lat": 45.0,
    "lon": -91.0,
    "name":"marker 0"
};
markersData[1] = {
    "lat": 45.0,
    "lon": -92.0,
    "name":"marker 1"
};
//...etc



// Load 10 markers every 100 miliseconds

function load_10_markers(){
    for (var n = 0 ; n < 10 ; n++) {
        var markerData = markersData.shift();
        if(markerData){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerData.lat, markerData.lon),
                title: markerData.name,
                map: map
            });
        }

    }
    if(markersData.length){
        window.setTimeout("load_10_markers()",100);
    }

}

load_10_markers();

Upvotes: 1

geocodezip
geocodezip

Reputation: 161334

You mean like the "too many markers" page from the documentation?

Upvotes: 1

catalinux
catalinux

Reputation: 1452

I am not sure what do you mean it takes ages. Who? Page to render? Map to render.

From a UI point of view ou should try a cluster markers id they are țoo close (there is a demo for v3 api)

Upvotes: 1

Related Questions