Как скрыть и показать слой kml с geoxml
Я хочу показать карту Google с тремя кнопками (флажками), каждая из которых скрывает или отображает определенный слой kml. Я использую geoxml, потому что я работаю локально, у меня нет ключа карты. Мне удалось показать карту, кнопки, но я не могу показать слои кмл над основной картой. Функция ativacam() корректно (по-видимому) фильтрует массив файлов для анализа в объекте myParser. Что не так, ребята? Лучший Рафаэль
Мой код:
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta name="FMJF" content="initial-scale=1.0" content="text/html">
<meta charset="utf-8">
<title>hide show kml geoxml</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src=geoxml3.js></script>
<script type="text/javascript">
function initMap() {
var styles = [
{featureType: "road",
elementType: "geometry",
stylers: [{ lightness: 100 },
{"color":"#000000"}]
},{featureType: "landscape.man_made",
elementType:"geometry",
stylers:[{"color":"#A4A4A4"}]
},{featureType: "road.local",
elementType: "labels.text",
stylers: [{"color":"#000000"}, {visibility: "simplified"},{weight:50}]
},{featureType: "poi",
elemenType: "labels",
stylers: [{ "visibility": "off" }]
},{featureType: "administrative",
elemenType: "labels",
stylers: [{ "visibility": "off" }]
},{featureType: "landscape.natural",
elemenType: "geometry",
stylers: [{ "color":"#F5EFFB" }]
},{featureType: "transit",
elemenType: "labels",
stylers: [{ "visibility": "off" }]
}];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -21.76242, lng: -43.34339},
mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']}
});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
};
function ativacam(){
var input = document.getElementsByTagName("input");
var cams = "";
for(i=0;i<input.length;i++){
if(input[i].type === "checkbox"){
//alert(i);
if(input[i].checked){
cams += ","+input[i].value;
//alert(cams);
}}}
if (cams) cams = cams.substring(1);
//alert(cams);
var myParser = new geoXML3.parser({map: map});
myParser.parse([cams]);
};
</script>
</head>
<body>
<div id="map" style="width:850px; height:750px; border: 2px solid #3872ac;"></div>
2007-2008<input type="checkbox" id="a" value="'file:///C:/Apache24/htdocs/ChFMjf200708.kml'" onclick="ativacam()" />
2012<input type="checkbox" id="b" value="'file:///C:/Apache24/htdocs/ChFMjf2012.kml'" onclick="ativacam()" />
2013-2015<input type="checkbox" id="c" value="'file:///C:/Apache24/htdocs/ChFMjf201315.kml'" onclick="ativacam()" />
<script async defer
src=https://maps.googleapis.com/maps/api/js?callback=initMap>
</script>
</body>
</html>