title: More than 15 KML-layers wont be visible on Google Maps API-based page
body: <p>I have this strange issue: I have to generate many KML-layers from separate KML-files to a single map window. The amounts vary between like a couple and less than fifty. At the moment my code is producing just correct behaviour when I'm giving it 1, 4 or 15 KML-files (as URIs) as an array. Okay, so basically I know that my code is functional and my KML-files are valid enough.</p>
  
  <p>Here's an example of how I call my map initialization with an array of 23 KML URI's:</p>
  
  <p><code>&lt;body id="body" onload="initmap(new Array('https://CENCORED/kml/project64.kml', 'https://CENCORED/kml/project65.kml', 'https://CENCORED/kml/project66.kml', 'https://CENCORED/kml/project67.kml', 'https://CENCORED/kml/project69.kml', 'https://CENCORED/kml/project70.kml', 'https://CENCORED/kml/project71.kml', 'https://CENCORED/kml/project72.kml', 'https://CENCORED/kml/project75.kml', 'https://CENCORED/kml/project76.kml', 'https://CENCORED/kml/project80.kml', 'https://CENCORED/kml/project81.kml', 'https://CENCORED/kml/project82.kml', 'https://CENCORED/kml/project83.kml', 'https://CENCORED/kml/project84.kml', 'https://CENCORED/kml/project85.kml', 'https://CENCORED/kml/project86.kml', 'https://CENCORED/kml/project87.kml', 'https://CENCORED/kml/project88.kml', 'https://CENCORED/kml/project89.kml', 'https://CENCORED/kml/project90.kml', 'https://CENCORED/kml/project91.kml', 'https://CENCORED/kml/project92.kml'))"&gt;</code></p>
  
  <p>However, problems arise, when I'm giving my code an array that has sixteen (16) or more KML URIs. Then these KML-files will never render on the map canvas. However, no errors emerge anywhere, and also: I know the KML-files "are there" on the map. How do I know this? Well as you can see, my code generates an InfoWindow for each of the KML files, and because I know where some of the KML files are supposed to be located, I'm able to click on then, even though they're invisible or haven't been rendered and the InfoWindow appears. Just as intended.</p>
  
  <p>And here is the complete contents of my map_display.js, which contains the called function initmap().</p>
  
  <pre><code>function initmap(urls){
      // Creating an option object for the map
      var myLatlng = new google.maps.LatLng(63.349501, 26.817627);
      var options = {
          zoom: 6,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      // Initializing the map
      var map = new google.maps.Map(document.getElementById('map_canvas'), options);
  
      if(urls != null) {
          for(var i=0;i&lt;urls.length;i++) {
              var url = urls[i];
              url = url+"?dummy="+(new Date()).getTime();
              var ctaLayer = createKML(url);
              ctaLayer.setMap(map);
          }
      }
  
      function createKML(url){
  
          var ctaLayer = new google.maps.KmlLayer(url, {suppressInfoWindows: true, preserveViewport: true});
  
          // Creating a correct reference for project edit URL
          var editUrl = urls[i];
          var s1 = editUrl.indexOf("project");
          s1 = s1+7;
          var s2 = editUrl.indexOf(".kml");
          editUrl = editUrl.substring(s1, s2);
  
          var baseUrl = getbaseUrl();
  
          var infoItems = new Array();
          infoItems = getInfo(editUrl);
  
          editUrl = '&lt;b&gt;' + infoItems[1] + '&lt;/b&gt;&lt;br /&gt;' + infoItems[0] + '&lt;br /&gt;&lt;br /&gt;&lt;a href="' + baseUrl + '/frontend/viewproject/' + editUrl + '"&gt;Katso projektin tiedot&lt;/a&gt;';
          // Creating an InfoWindow object
          var infowindow = new google.maps.InfoWindow({ content: editUrl });
  
          google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
              var clickPos = kmlEvent.latLng;
              var posX = new google.maps.LatLng(clickPos.lat(), clickPos.lng());
  
              infowindow.close();
              infowindow.setPosition(posX);
              infowindow.open(map);
  
          });
  
          return ctaLayer;
      }
  
      function getbaseUrl(){
  
          var baseUrl = "https://" + window.location.hostname;
          var firstpath = window.location.pathname;
          var first_slash = firstpath.indexOf("/", 1);
          firstpath = firstpath.substring(0, first_slash);
          baseUrl = baseUrl + firstpath;
  
          return baseUrl;
      }
  
      function getInfo(pid){
  
          var jsoninfo = new Array();
  
          var xmlhttp;
          if (window.XMLHttpRequest)
          {
              xmlhttp=new XMLHttpRequest();
          }
          else
          {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
  
          var json_location = getbaseUrl() + '/frontend/project_json/' + pid;
  
          xmlhttp.open("GET",json_location,false);
          xmlhttp.send();
  
          var json_answer = eval('(' + xmlhttp.responseText + ')');
  
          jsoninfo[0] = json_answer["projectName"];
          jsoninfo[1] = json_answer["builder"];
  
          return jsoninfo;
      }
  
  }
  </code></pre>
  
  <p>Can somebody help me? I'm sorry, but I'm not able to give a live system as a reference, because it is a part of a larger page that is password protected etc. </p>