Google maps not rendering markers from ajax with markercluster in Google Chrome

Question

I have a website that uses a google map. The markers data for the google map is retrieved from the server by ajax. I use markerclusterer to limit the number of markers that appear on the map at once. On Chrome if more than about 30 markers are returned the google map goes blank. The map works fine in Firefox and Internet Explorer. Any ideas on what is going wrong?

Here is a page that has the problem providersguide.com/index1.php make any selection from the drop down menu and hit search to load markers data.

This is only a problem in Google Chrome. I am using version 44 of Chrome.

Answer 1

The source of the issue is the setting of the innerHTML, there seems to be a size-limit in Chrome, see innerHTML size limit

The result is invalid js-code.

Solution:

This line:

 eval(document.getElementById("mapgen").innerHTML);

will not have the desired effect. The Request runs asynchronously, at the moment when this line will be executed the response isn't available yet, the innerHTML of #mapgen is empty, nothing will be done.

Basically you don't need to use eval at all, because the script will be executed automatically when you set the innerHTML.

But when you can't set the innerHTML because of the size eval() the responseText directly(in the onreadystate-callback):

window.onload = function()
{

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    eval(xmlhttp.responseText);

    }
  }
xmlhttp.open("GET","the/desired/url",true);
xmlhttp.send();
}

However, the current approach to load the markers isn't recommendable. You send a form, load a new page and send another request to load a large script which must be evaluated.

You better send the form via AJAX to load the markers, and instead of returning a script return a JSON with the marker-properties only(the creation of the markers may be done in a loop where you parse the returned JSON)