День добрый!
будьте добры дать совет, вот говнокод который при клике по чекбоксу делает аякс запрос на xml файл, забирает данные и выводит их метками на карту гугл.
при повторном клике есть оставить marker.setMap(null); то удаляется только последний маркер. пробовал создать массив markerArray но не выходит.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Common Loader</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/util.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready(function(){
$('.itemService input[type="checkbox"]').click(function(){
var serviceID = $(this).val();
var markerArray = [];
if($(this)[0].checked == false){
// было marker.setMap(null); - удаляет только последний маркер
for(i =0; i< markerArray.length; i++){
markerArray[i].setMap(null);
}
}else{
// при первом клике загружает маркеры на карту
downloadUrl("moredata.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
if ($(markers[i]).attr('age') == 20){
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
markerArray.push(createMarker(markers[i].getAttribute("name"), latlng));
}
//var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
//parseFloat(markers[i].getAttribute("lng")));
//markerArray.push(createMarker(markers[i].getAttribute("name"), latlng));
//console.log(markerArray);
}
});
function createMarker(name, latlng) {
marker = new google.maps.Marker({position: latlng, map: map});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
}
});
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:300px"></div>
<div class="catalogServices">
<div class="itemService"><input type="checkbox" name="CATALOG_SERVICES[]" value="1280"> Захист прав ВІЛ-позитивних людей (юридичні послуги)</div>
<div class="itemService"><input type="checkbox" name="CATALOG_SERVICES[]" value="1279"> Індивідуальне представництво інтересів ВІЛ-позитивних людей (сприяння в оформленні\відновленні документів, соціальної допомоги, пенсії, інвалідності тощо)</div>
<div class="itemService"><input type="checkbox" name="CATALOG_SERVICES[]" value="1278"> Продіагностика ТБ за допомогою рентгену</div>
<div class="itemService"><input type="checkbox" name="CATALOG_SERVICES[]" value="1277"> Діагностика ТБ за допомогою біопсії</div>
</div>
</body>
</html>
Вот хml файл
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker name="Jackie" age="10" lat="50.39188559752663" lng="30.498046875"/>
<marker name="Peter" age="10" lat="37.413320" lng="-122.125604"/>
<marker name="Mary" age="20" lat="37.433480" lng="-122.139062"/>
<marker name="Puff" age="20" lat="37.445427" lng="-122.162307"/>
</markers>