mardi 23 février 2016

Checkboxes interfere each other Google maps markers

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