I am placing markers on a Google map. I have a number of checkboxes that toggle between display or not display markers. The code works great for the individual pieces when a single checkbox is selected. I would like to have the code take into account if multiple checkboxes are selected and display those markers. The problem is that if I select two or more checkboxes they interfere each other. How can I fix this? See below the html and javascript code:
<div id="nav">
<input id="zoek-box" type="text" placeholder="Vul een locatie in"><br><br>
<div class="dropdown">
<button onclick="dropDown()" class="dropbtn">Merk telefooncentrale</button>
<div id="myDropdown" class="dropdown-content">
<input name="box1" id="box1" value="Aastra NexSpan" onclick="setMarker('aa')" type="checkbox"> <label for="box1">Aastra NexSpan</label><br>
<input name="box2" id="box2" value="Alcatel OmniPCX" onclick="setMarker('al')" type="checkbox"> <label for="box2">Alcatel OmniPCX</label><br>
<input name="box3" id="box3" value="AVAYA Communication Manager" onclick="setMarker('av')" type="checkbox"> <label for="box3">AVAYA Communication Manager</label><br>
</div>
</div>
</div>
<div id="map" style="width:80%;height:735px;"></div>
javascript:
var markers = [];
var getData = [];
var marker;
var map;
var markerGroups = {
"aa": [],
"al": [],
"av": []
};
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.33, lng: 5.10},
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('zoek-box');
var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
getXmlData();
}
function getXmlData() {
var xml = xmlParse(xmlData);
getData = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < getData.length; i++) {
var name = getData[i].getAttribute("name");
var address = getData[i].getAttribute("address");
var telecenter = getData[i].getAttribute("telecenter");
var point = new google.maps.LatLng(
parseFloat(getData[i].getAttribute("lat")),
parseFloat(getData[i].getAttribute("lng")));
var infoWindow = new google.maps.InfoWindow();
var html = "<b>" + name + "</b> <br/>" + address;
createMarker(point, telecenter);
bindInfoWindow(marker, infoWindow, html);
}
}
function createMarker(point, telecenter) {
marker = new google.maps.Marker({
position: point,
telecenter: telecenter,
map: map
});
markers.push(marker);
markerGroups[telecenter].push(marker);
}
function setMarker(telecenter) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].getMap() != null) {
markers[i].setMap(null);
} else {
if (markers[i].getMap() == null) {
markers[i].setMap(map);
}
}
}
switch (telecenter) {
case 'aa':
for (var i = 0; i < markerGroups[telecenter].length; i++) {
var marker = markerGroups['aa'][i];
if (marker.getMap() == null) {
marker.setMap(map);
} else {
if (marker.getMap() != null)
marker.setMap(null);
}
}
break;
case 'al':
for (var i = 0; i < markerGroups[telecenter].length; i++) {
var marker = markerGroups['al'][i];
if (marker.getMap() == null) {
marker.setMap(map);
} else {
if (marker.getMap() != null)
marker.setMap(null);
}
}
break;
case 'av':
for (var i = 0; i < markerGroups[telecenter].length; i++) {
var marker = markerGroups['av'][i];
if (marker.getMap() == null) {
marker.setMap(map);
} else {
if (marker.getMap() != null)
marker.setMap(null);
}
}
break;
default:
for (var i = 0; i < markers.length; i++) {
if (markers.setMap(null)) {
markers.setMap(map);
} else {
if (markers.setMap(map))
markers.setMap(null);
}
}
}
}
function bindInfoWindow(marker, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
}
var xmlData = '<markers><marker name="Amsterdam" address="Mercatorplein 45" lat="52.36955" lng="4.85092" telecenter="aa"/>\n\
<marker name="Amsterdam" address="Oosterpark" lat="52.35886" lng="4.92062" telecenter="al"/>\n\
<marker name="rotterdam" address="Rembrandtstraat "lat="51.91175" lng="4.47144" telecenter="av"/>\n\
</markers>';
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
}
function dropDown() {
document.getElementById("myDropdown").classList.toggle("show");
}
Aucun commentaire:
Enregistrer un commentaire