谷歌地圖：標記活躍的類別

Question

我有一些類別，如咖啡，購物和學校。我怎麼能當我加載頁面的類別咖啡是積極的所有標記和所有其他類別被隱藏...

這是我的代碼。

 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

既然你默認標記爲不可見（marker.setVisible(false);），呼籲那些toggleGroup你想看到顯示它們之後。

toggleGroup("coffe"); 

proof of concept fiddle（不使用你的數據，因爲你沒有提供任何，使用從a Google Example樣本）

代碼片段：

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" />