In the need of a Portugal map where users can select districts onclick, I followed this example and this one. The problem is I'm using a KML file for each district to be drawn as a polygon instead of using a KML for ALL districts polygons.
Already searched many questions here and also tried to change the useTheData () callback function to include an extra for cycle like shown below but with no success...
function useTheData(doc) {
var sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
for (var j = 0; j < doc.length ; j++) {
...
}
sidebarHtml += "</table>";
document.getElementById("map_barralateral").innerHTML = sidebarHtml;
};
Hovering districts on the map works fine, but when clicking highlight link on the sidebar it defaults to highlight the polygon created with the last KML file of the list...
Is there anyway to fix this?
My FULL Code is here: http://afonsogomes.com/mapas
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title>XXXXX</title>
<style>
html,body {margin: 0;padding: 0;}
#map_canvas, #map_barralateral {width: 300px;height: 500px;margin: 0;padding: 0;float: left;background-color: #e5e3df;}
#map_canvas{height: 520px;}
#map_barralateral{width: 300px;font-family: Arial, sans-serif;font-size: 12px;padding: 10px;}
#loaddiv {width: 620px;background-color: #78A04C;border: none;padding: 20px 0;font-family: Arial, sans-serif;color: #FFF;font-weight: 700;text-align: center;position: absolute;left: 0;top: 200px;margin: 0 auto;filter: alpha(opacity=90);opacity: .90;z-index: 100;}
</style>
<script src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script>
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var sidebarHtml = "";
var filename_example = ["kml/porto.kml", "kml/faro.kml", "kml/braganca.kml", "kml/evora.kml"];
function initialize() {
myLatLng = new google.maps.LatLng(39.96293, -8.03770);
var myOptions = {
zoom: 18,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
showLoad();
geoXml = new geoXML3.parser({
map: map,
zoom: myGeoXml3Zoom,
suppressInfoWindows: true,
singleInfoWindow: false,
afterParse: useTheData
});
google.maps.event.addListener(geoXml, 'parsed', function () {
hideLoad();
});
geoXml.parse(filename_example);
};
function kmlHighlightPoly(poly) {
for (var i = 0; i < geoXmlDoc.gpolygons.length; i++) {
if (i == poly) {
geoXmlDoc.gpolygons[i].setOptions({ fillColor: "#0000FF", strokeColor: "#0000FF" });
} else {
geoXmlDoc.gpolygons[i].setOptions({ fillColor: "#FF0000", strokeColor: "#FF0000" });
}
}
}
function showAll() {
map.fitBounds(geoXmlDoc.bounds);
for (var i = 0; i < geoXmlDoc.gpolygons.length; i++) {
geoXmlDoc.gpolygons[i].setMap(map);
}
}
function highlightPoly(poly) {
google.maps.event.addListener(poly, "mouseover", function () {
poly.setOptions({ fillColor: "#FF0000", strokeColor: "#FF0000" });
});
google.maps.event.addListener(poly, "mouseout", function () {
poly.setOptions({ fillColor: "#78A04C", strokeColor: "#78A04C", fillOpacity: 0.4 });
});
}
function useTheData(doc) {
var sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
for (var j = 0; j < doc.length ; j++) { // Added by me to parse all kml files to the map
geoXmlDoc = doc[j];
for (var i = 0; i < doc[j].gpolygons.length; i++) {
sidebarHtml += '<tr><td>' + doc[j].placemarks[i].name + ' - <a href="javascript:kmlHighlightPoly(' + j + ');">highlight</a><br></td></tr>';
highlightPoly(doc[j].gpolygons[i]);
}
}
sidebarHtml += "</table>";
document.getElementById("map_barralateral").innerHTML = sidebarHtml;
};
function hideLoad() {
var loaddiv = document.getElementById("loaddiv");
if (loaddiv == null) {
alert("Sorry can't find the loaddiv");
return;
}
loaddiv.style.visibility = "hidden";
}
function showLoad() {
var loaddiv = document.getElementById("loaddiv");
if (loaddiv == null) {
alert("Sorry can't find your loaddiv");
return;
}
loaddiv.style.visibility = "visible";
}
</script>
</head>
<body onload="initialize()">
<div id="loaddiv">A carregar.....    Por favor aguarde!</div>
<div id="map_canvas"></div>
<div id="map_barralateral"></div>
<div id="map_status"></div>
</body>
</html>
You need to modify kmlHighlightPoly also to account for the use of multiple KML files:
function kmlHighlightPoly(doc,poly) {
for (var j=0; j < geoXmlDoc.length; j++) {
for (var i = 0; i < geoXmlDoc[doc].gpolygons.length; i++) {
if ((j == doc) && (i == poly)) {
geoXmlDoc[j].gpolygons[i].setOptions({ fillColor: "#FF0000", strokeColor: "#FF0000" });
} else {
geoXmlDoc[j].gpolygons[i].setOptions({ fillColor: "#78A04C", strokeColor: "#78A04C", fillOpacity: 0.4 });
}
}
}
}
And change useTheData to pass in the document to the kmlHighlightPoly function.
function useTheData(doc) {
var sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
for (var j = 0; j < doc.length ; j++) { // Added by me to parse all kml files to the map
geoXmlDoc = doc;
for (var i = 0; i < doc[j].gpolygons.length; i++) {
sidebarHtml += '<tr><td>' + doc[j].placemarks[i].name + ' - <a href="javascript:kmlHighlightPoly('+j+','+i+');">highlight</a><br></td></tr>';
highlightPoly(doc[j].gpolygons[i]);
}
}
sidebarHtml += "</table>";
document.getElementById("map_barralateral").innerHTML = sidebarHtml;
};