I've encountered an unusual issue: I need to create multiple KML layers from separate KML files and display them on a single map window. The number of files ranges from just a couple to less than fifty. Currently, my code works perfectly when given 1, 4, or 15 KML files (as URIs) in an array. So, it's safe to say that the code is functional and the KML files are formatted correctly.
For example, here's how I initialize my map with an array containing 23 KML URIs:
<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...
However, issues arise when providing the code with an array of sixteen (16) or more KML URIs. In these cases, the KML files fail to render on the map canvas, even though there are no visible errors. How do I know this? Well, although the files may not be rendering visually, the InfoWindows associated with each KML file still appear when clicked, indicating that they exist within the map but are not displaying as intended.
Below is the complete code from my map_display.js file, which includes the initmap() function that is being called:
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<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 = '<b>' + infoItems[1] + '</b><br />' + infoItems[0] + '<br /><br /><a href="' + baseUrl + '/frontend/viewproject/' + editUrl + '">Katso projektin tiedot</a>';
// 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;
}
}
I'm seeking some assistance. Unfortunately, I can't provide a live system for reference as it's password-protected and part of a larger page.