Google Maps not resolving

[Kedar Dixit]

 Dear Sir/Madam,
Greetings.

Background :

We are using google maps API to draw markers and clusters.
We are fetching data from Hadoop.
We are passing JSON data containing 25 K records which should be around 20 MB file.

API LINK  :https://maps.googleapis.com/maps/api/js?v=3&sensor=false

Issue :
Recently we started encountering an issues where maps fail to load when we attempt to plot markers.
Markers get plotted but map fails to render further.
However map loads when we add an javascript alert to function where we load map.
We also had issues with zooming in same context which was resolved later. We still require a javascript alert (which as per our understanding serves as a delay), to get map loaded along with markers.
This really needs your expertise to resolve, have attached all used files and resources along.

Our Code Sample Below :

   function refreshMap1(srverfilteredarray) {

            try {                            
                srverfilteredarray = JSON.parse(srverfilteredarray)                 
//alert("refreshmap1");
                if (markerClusterer) {
                    markerClusterer.clearMarkers();
                }

                for (var i = 0; i < this.GlobalMarkerVariabletoReset.length; i++) {
                    this.GlobalMarkerVariabletoReset[i].setMap(null);
                }

                //        $(document).ready(function () {
                //            $('.searchtree').toggle('slide');
                //            $('.searchfilter').toggle('slide');
                //        });



                var Filteredmarkers = [];
                var FilteredmarkersfoSites = [];

                var markers = [];
                var markerImage = new google.maps.MarkerImage('../../Images/taxi3.png', new google.maps.Size(24, 32));
                var sites = srverfilteredarray;
                // AllMarkers =sites;
 //alert("before forloop");

 

for (var i = 0; i < sites.length; ++i) {

                    var ltg = sites[i];
                    var markerImage = new google.maps.MarkerImage(ltg.ImagePath, new google.maps.Size(48, 48));
                    //alert(ltg.Latitude);
                    var latLng = new google.maps.LatLng(ltg.Latitude, ltg.Longitude)
                    var marker = new google.maps.Marker({
                        position: latLng,
                        draggable: false,
                        icon: markerImage,
                        html: ltg.InfoWindow,
                        customInfo: ltg.Legend
                    });

//alert("After Marker Loop");

                    google.maps.event.addListener(marker, 'click', function () {
                        var Str = this.html.substring((this.html.indexOf("[") + 1), this.html.indexOf("]")); //ltg[4].toString();
                        if (Str.length > 0 && Str != 'N/A') {

                            infoWindowContentByAccess = '<div id="infoMap" style="font-family:Segoe UI;font-size:9pt">' + this.html.replace("[", '').replace("]", '') + '<br> <a href="javascript:window.external.ShowVehicleDetails(\'' + Str + '\' )" onclick="onclick="javascript:window.external.ShowVehicleDetails(\'' + Str + '\' ); return false;" > Vehicle Dashboard>></a>';

                            if (linkAccess.LiveTracker)
                                infoWindowContentByAccess += '<a href="javascript:window.external.ShowLiveTracker(\'' + Str + '\' )"  onclick="javascript:window.external.ShowLiveTracker(\'' + Str + '\' ); return false; target="_blank">Live Tracker>></a> ';

                            if (linkAccess.Route)
                                infoWindowContentByAccess += '<a href="javascript:window.external.ShowRoute(\'' + Str + '\' )" onclick="javascript:window.external.ShowRoute(\'' + Str + '\' ); return false; ">Route>></a> ';

                            if (linkAccess.TravelData)
                                infoWindowContentByAccess += '<a href="javascript:window.external.ShowTraveldata(\'' + Str + '\' )" onclick="javascript:window.external.ShowTraveldata(\'' + Str + '\' ); return false; ">Travel Data>></a> ';

                            infoWindowContentByAccess += '<a href="javascript:window.external.AnotherMethod(\'' + Str + '\' )" onclick="javascript:window.external.AnotherMethod(\'' + Str + '\' ); return false; ">More Info>></a> <a href="http://10.100.100.199/HiveUAT/Pages/ViewPage.aspx?system=Acquire&searchparam=' + Str + '"  target="_blank">Hive>></a>  </div>';

                            infowindow.setContent(infoWindowContentByAccess);
                            infowindow.open(map, this);
                        }
                        else {
                            infowindow.setContent(this.html);
                            infowindow.open(map, this);
                        }
                    });

//alert("After Event.AddListeener");

                    google.maps.event.addListener(marker, 'mouseover', function (mark) {
                        var legendDiv = document.createElement('DIV');
                        // Create the legend and display on the map
                        var legend = new Legend(legendDiv, map, this.customInfo);
                        legendDiv.index = 1;
                        map.controls[google.maps.ControlPosition.RIGHT_CENTER].pop();
                        map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(legendDiv);
                    });

                    google.maps.event.addListener(marker, 'mouseout', function (mark) {
                        var legendDiv = document.createElement('DIV');
                        // Create the legend and display on the map
                        var legend = new Legend(legendDiv, map, '<b>Details</b><br/>');
                        legendDiv.index = 1;
                        map.controls[google.maps.ControlPosition.RIGHT_CENTER].pop();
                        map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(legendDiv);
                    });

                    Filteredmarkers.push(marker);

                }

            

  var zoom = 25? null : zoom;
                var size = 100 ? null : size;
                var style = -1 ? null : style;

                AllMarkers = Filteredmarkers;


   // GlobalMarkerVariabletoReset = Filteredmarkers;
         
//wait(5000);


 markerClusterer = new MarkerClusterer(map, Filteredmarkers, {            
                   maxZoom: zoom,
                    gridSize: size,
                    styles: styles[style]

                });


     // google.maps.event.addDomListener(window, 'load', wait(1000));

// google.setOnLoadCallback(initialize);

            google.maps.visualRefresh = true;


     
//Alert(google.maps.visualRefresh);

alert('Please click OK');

google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster){
    map.setCenter(cluster.getCenter());
    map.setZoom(map.getZoom()+1);
});
 

            } catch (e) {

                alert(e.Message);

            }
    

        }



Request you to please review and provide assistance.

Thank you,
Kedar Dixit

[Michael Geary]

On Wed, Apr 12, 2017 at 7:23 AM, Kedar Dixit <dxt...@gmail.com> wrote:

Markers get plotted but map fails to render further.
However map loads when we add an javascript alert to function where we load map.

This almost always means you are handling some asynchronous activity incorrectly, e.g. you are assuming that some data is available before it is ready. When you make an asynchronous server request (e.g. a $.ajax() call), you can't assume that the data is available when the call returns. You have to provide a callback function that will be called when the server sends down the data.

In a quick skim of your code, I don't see any asynchronous calls. I suspect that the problem is somewhere else in your code, in the part you didn't show here.

Specifically, where in your code does the refreshMap1() function get called, and what data is passed in for the srverfilteredarray parameter?

Also note that Maps API support has moved to Stack Overflow. This mailing list doesn't get much activity an more. So you might want to post your question on SO instead of here.

[Andrew Leach]

On Thu, Apr 13, 2017, at 05:19, Michael Geary wrote:
>
> Specifically, where in your code does the refreshMap1() function get
> called, and what data is passed in for the srverfilteredarray parameter?
>
> Also note that Maps API support has moved to Stack Overflow. This mailing
> list doesn't get much activity an more. So you might want to post your
> question on SO instead of here.

BUT ...

DON'T just post a load of code in your Stack Overflow question. It will
be downvoted heavily and closed or removed fairly quickly.

DO have a look at http://stackoverflow.com/help/how-to-ask to learn
about what that community requires. Specifically, a *minimal* code case
to reproduce the problem. And include what you have done so far to
diagnose what's going on so far -- you have used "Developer mode" or
Firebug in your browser, haven't you? That should show you an error
message and may allow you to step through the call stack to find exactly
where the faulty code is called, at which point you can examine
variables. All of that information needs to be in the Stack Overflow
question.