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.

I get 2 problems trying it in Chrome: 1: GET http://providersguide.com/markercluster.js 404 (Not Found) 2: Uncaught SyntaxError: Unexpected token ILLEGAL (xmlhttp.onreadystatechange @ index1.php:69) — duncan, Jul 29 '15 at 15:52
I don't know why the markercluster.js would be 404 (Not Found). It still clusters markers when few markers are returned. — Sir_James, Jul 29 '15 at 16:30
Would the size of the output from the ajax script cause a problem? My script can return around 500 markers. — Sir_James, Jul 29 '15 at 16:37
Looking at the source of your page, you're loading this file twice, not a good idea: `` — duncan, Jul 29 '15 at 21:18
Then when I submit the form, I get a JS file loaded via AJAX which is nearly 5000 lines long! *Seriously* think about rewriting your PHP file that is generating this JS. It could well be the size that's the problem. — duncan, Jul 29 '15 at 21:22
duncan thanks for catching the duplicate script tags. I'm going to look at changing how I can load the markers. — Sir_James, Jul 30 '15 at 23:31

score 1 · Accepted Answer · edited May 23 '17 at 11:58

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)

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

1 Answers1