Google maps：カテゴリーでアクティブなマーカー

Question

私はcoffe、ショッピング、学校のようなカテゴリがあります。どのように私はすべてのマーカーと他のすべてのカテゴリを非表示にするためにアクティブになるようにカテゴリのcoffeページを読み込むときに行うことができます...

ここに私のコードです。

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