Question

I have a question. How can I improve speed of getting values in this script below?
My script sets a 170 markers, later gets a values lng and lat of map bounds when map is in change (idle event) and send this values into hiddenfield. For 10-20-30 markers, this values are showing very fast, but for +100 markers, this function is very slow, and it takes a 5-6 sec to show all values when map is change.. I’m using marker clusterer, but there is no effect in speed. How to improve this?
greetings !

                (..) // map options
                var map = new google.maps.Map(document.getElementById("mapka"), mapOptions);

                var markers = [];

                var lngstring = <%=lngstring %>
                var latstring = <%=latstring %>
                //alert(latstring);
                //alert(lngstring);
                var arraylat = latstring.split("#");
                var arraylng = lngstring.split("#");

                for (var i = 0; i < arraylng.length-1; i++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(arraylng[i], arraylat[i])
                    });
                markers.push(marker);
                }
                var markerCluster = new MarkerClusterer(map, markers);

                google.maps.event.addListener(map, 'idle', function () {
                var bounds = map.getBounds();
                var nelat = bounds.getNorthEast().lat();
                var nelng = bounds.getNorthEast().lng();
                var swlat = bounds.getSouthWest().lat();
                var swlng = bounds.getSouthWest().lng();
                var c1 = map.getCenter().lat();
                var c2 = map.getCenter().lng();
                var zoom1 = map.getZoom();
                document.getElementById("<%=hfNelat.ClientID%>").value = nelat;
                document.getElementById("<%=hfNelng.ClientID%>").value = nelng;
                document.getElementById("<%=hfSwlat.ClientID%>").value = swlat;
                document.getElementById("<%=hfSwlng.ClientID%>").value = swlng;
                document.getElementById("<%=UpdateButton1.ClientID %>").click();
                });

Code “behind”:

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
        lNelat.Text = hfNelat.Value;
        lNelng.Text = hfNelng.Value;
        lSwlat.Text = hfSwlat.Value;
        lSwlng.Text = hfSwlng.Value;
    }

Answer 1

It looks to me like you are loading the markers statically in the page. The page would load faster if you were to load the markers using AJAX techniques (asynchronously).

See the The AJAX Philosophy page from Mike Williams’ v2 tutorial.