Google Maps: Marker aktiv durch die Kategorie

Question

Ich habe einige Kategorien wie Kaffee, Einkaufen und Schulen. Wie kann ich tun, wenn ich die Seite laden die Kategorie Kaffee aktiv mit allen Markierungen und alle anderen Kategorien versteckt werden ...

Hier ist mein Code.

 function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
       center: new google.maps.LatLng(47.059516, 21.947613), 
       zoom: 13, 
       scrollwheel: false, 
       mapTypeId: 'roadmap' 
      }); 
      var infoWindow = new google.maps.InfoWindow(); 
      // Change this depending on the name of your PHP file 
      downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) { 
       var xml = data.responseXML; 
       var markers = xml.documentElement.getElementsByTagName("marker"); 
       for (var i = 0; i < markers.length; i++) { 
        var id_marker = markers[i].getAttribute("id_marker"); 
        var name = markers[i].getAttribute("name"); 
        var category = markers[i].getAttribute("category"); 
        var address = markers[i].getAttribute("address"); 
        var img = markers[i].getAttribute("img"); 
        var phone = markers[i].getAttribute("phone"); 
        var schedule = markers[i].getAttribute("schedule"); 
        var link = markers[i].getAttribute("link"); 
        document.getElementById('categorii').src = img; 
        var type = markers[i].getAttribute("type"); 

        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")), 
          parseFloat(markers[i].getAttribute("lng"))); 
        var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link ; 
        var icon = customIcons[type] || {}; 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: point, 
         icon: icon.icon, 
         id_marker: id_marker, 
         image: img, 
         type: type 

        }); 

        markerGroups[type].push(marker); 


        marker.setVisible(false); 
        bindInfoWindow(marker, map, infoWindow, html); 

       } 
      }); 
     } 


     function toggleGroup(type) { 
      for (var i = 0; i < markerGroups[type].length; i++) { 
       var marker = markerGroups[type][i]; 
       if (!marker.getVisible()) { 

        marker.setVisible(true); 


       } else { 

        marker.setVisible(false); 
       } 


      } 
     } 


     function bindInfoWindow(marker, map, infoWindow, html) { 
      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 
       infoWindow.open(map, marker); 


       document.getElementById('categorii').src = marker.image; 

      }); 
     } 

     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() { 
     } 

Answer 1

Da Sie die Markierungen nicht sichtbar (marker.setVisible(false);) Standard, rufen toggleGroup auf die, die Sie nach der Anzeige sichtbar zu wollen.

toggleGroup("coffe"); 

proof of concept fiddle (Ihre Daten nicht verwenden, da Sie nicht zur Verfügung gestellt hat, eine Probe aus a Google Example verwendet)

Code-Schnipsel:

var map; 
 
var customIcons = { 
 
    restaurant: { 
 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
 
    }, 
 
    bar: { 
 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
 
    } 
 
}; 
 
var markerGroups = []; 
 

 
function load() { 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
    center: new google.maps.LatLng(47.059516, 21.947613), 
 
    zoom: 13, 
 
    scrollwheel: false, 
 
    mapTypeId: 'roadmap' 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    // Change this depending on the name of your PHP file 
 
    // downloadUrl("googlemaps/phpsqlajax_genxml2.php", function(data) { 
 
    //var xml = data.responseXML; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var xml = parseXml(sampleXmlData); 
 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
 
    for (var i = 0; i < markers.length; i++) { 
 
    var id_marker = markers[i].getAttribute("id_marker"); 
 
    var name = markers[i].getAttribute("name"); 
 
    var category = markers[i].getAttribute("category"); 
 
    var address = markers[i].getAttribute("address"); 
 
    var img = markers[i].getAttribute("img"); 
 
    var phone = markers[i].getAttribute("phone"); 
 
    var schedule = markers[i].getAttribute("schedule"); 
 
    var link = markers[i].getAttribute("link"); 
 
    document.getElementById('categorii').src = img; 
 
    var type = markers[i].getAttribute("type"); 
 

 
    var point = new google.maps.LatLng(
 
     parseFloat(markers[i].getAttribute("lat")), 
 
     parseFloat(markers[i].getAttribute("lng"))); 
 
    bounds.extend(point); 
 
    var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link; 
 
    var icon = customIcons[type] || {}; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: point, 
 
     icon: icon.icon, 
 
     id_marker: id_marker, 
 
     image: img, 
 
     type: type 
 

 
    }); 
 
    if (!markerGroups[type]) markerGroups[type] = []; 
 
    markerGroups[type].push(marker); 
 
    marker.setVisible(false); 
 
    bindInfoWindow(marker, map, infoWindow, html); 
 
    } 
 
    // }); 
 
    map.fitBounds(bounds); 
 
    toggleGroup("bar"); 
 
    google.maps.event.addDomListener(document.getElementById('barbtn'), 'click', function() { 
 
    toggleGroup("bar") 
 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('restaurantbtn'), 'click', function() { 
 
    toggleGroup("restaurant") 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', load); 
 

 
function toggleGroup(type) { 
 
    for (var i = 0; i < markerGroups[type].length; i++) { 
 
    var marker = markerGroups[type][i]; 
 
    if (!marker.getVisible()) { 
 
     marker.setVisible(true); 
 
    } else { 
 
     marker.setVisible(false); 
 
    } 
 
    } 
 
} 
 

 
function bindInfoWindow(marker, map, infoWindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 

 

 
    document.getElementById('categorii').src = marker.image; 
 

 
    }); 
 
} 
 

 
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() {} 
 

 
function parseXml(str) { 
 
    if (window.ActiveXObject) { 
 
    var doc = new ActiveXObject('MicrosoftXMLDOM'); 
 
    doc.loadXML(str); 
 
    return doc; 
 
    } else if (window.DOMParser) { 
 
    return (new DOMParser()).parseFromString(str, 'text/xml'); 
 
    } 
 
} 
 
var sampleXmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/><marker name="Buddha Thai &amp; Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/><marker name="Mama&apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar"/><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/></markers>';

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" value="bar" id="barbtn" /> 
 
<input type="button" value="restaurant" id="restaurantbtn" /> 
 
<div id="map"></div> 
 
<img id="categorii" />