Javascript/Google Charts - Googleマップにマーカーフィルタを追加する

Question

私は、選択されているドロップダウンオプションに基づいて場所のマーカーを入力するマップを作成しようとしています。私はここで

http://jsfiddle.net/kamelkid2/drytwvL8/77/

た半分の作業jsfiddleは、基本的には最終的な結果は、彼らが最高の年齢層および/または赤ちゃんのスイングとの遊び場により適しています遊び場を表示したい場合は、ユーザが選択可能である必要があります。その結果マーカーは、私がここに適切

<div id="map-canvas"></div> 
<select id="type" onchange="filterMarkers(this.value);"> 
    <option value="">BEST FOR (SHOW ALL)</option> 
    <option value="BABIES">BEST FOR BABIES</option> 
    <option value="TODDLERS">BEST FOR TODDLERS</option> 
    <option value="KIDS">BEST FOR KIDS</option> 
    <option value="ALL">BEST FOR ALL</option> 
</select> 

を動作するように最初のマーカーフィルターを得ることができるマップ

に移入されます第2のマーカーフィルターは全体の機能しませんが、フィルタ

filterMarkers = function (category) { 
    for (i = 0; i < markers1.length; i++) { 
     marker = gmarkers1[i]; 
     // If is same category or category not picked 
     if (marker.category == category || category.length === 0) { 
      marker.setVisible(true); 
     } 
     // Categories don't match 
     else { 
      marker.setVisible(false); 
     } 
    } 
} 

です私は多くの試みを試みた。 2つのドロップダウンをフィルタリングすることは可能ですか、それとも私が試みるべき別の戦略がありますか？私は小さな小さなプロジェクトにはほとんど指導を得るために期待していますほとんどjsfiddleリンク

は私の最高の試みを持っていますが、私はまだjavascriptので非常に熟達していないです私の妻のママグループの

Answer 1

あなたは二つのことを忘れてしまいました：

marker1 = new google.maps.Marker({ 
     title: title, 
     position: pos, 
     category: category, 
     categorybs: categorybs, //add this line 
     map: map 
    }); 

2.Your filterMarkersBS機能がのではなく、categoryで働いていた：

1.Youはマーカーにcategorybsを追加するのを忘れて、あなただけのcategoryを追加しました。あなたはこのようにそれを更新する必要があります。コードの作業

filterMarkersBS = function (categorybs) { 
    for (i = 0; i < markers1.length; i++) { 
     marker = gmarkers1[i]; 
     // If is same category or category not picked 
     if (marker.categorybs == categorybs || categorybs.length === 0) { 
      marker.setVisible(true); 
     } 
     // Categories don't match 
     else { 
      marker.setVisible(false); 
     } 
    } 
} 

：

var gmarkers1 = []; 
 
var markers1 = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
}); 
 

 
// Our markers 
 
markers1 = [ 
 
    ['0', 'Cascade Park - 130 Lynn Dr, Hudson, OH 44236', 41.234830, -81.453479, 'KIDS', 'BSNO'], 
 
    ['1', 'Hudson Springs Park - 7095 Stow Rd, Hudson, OH 44236', 41.250798, -81.407120, 'BABIES', 'BSYES'], 
 
    ['2', 'Middleton Park - 1708 Middleton Rd, Hudson, OH 44236', 41.268963, -81.450649, 'ALL', 'BSNO'] 
 
]; 
 

 
/** 
 
* Function to init map 
 
*/ 
 

 
function initialize() { 
 
    var center = new google.maps.LatLng(41.234830, -81.453479); 
 
    var mapOptions = { 
 
     zoom: 12, 
 
     center: center, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    for (i = 0; i < markers1.length; i++) { 
 
     addMarker(markers1[i]); 
 
    } 
 
} 
 

 
/** 
 
* Function to add marker to map 
 
*/ 
 

 
function addMarker(marker) { 
 
    var category = marker[4]; 
 
    var categorybs = marker[5]; 
 
    var title = marker[1]; 
 
    var pos = new google.maps.LatLng(marker[2], marker[3]); 
 
    var content = marker[1]; 
 

 
    marker1 = new google.maps.Marker({ 
 
     title: title, 
 
     position: pos, 
 
     category: category, 
 
     categorybs: categorybs, 
 
     map: map 
 
    }); 
 

 
    gmarkers1.push(marker1); 
 

 
    // Marker click listener 
 
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) { 
 
     return function() { 
 
      console.log('Gmarker 1 gets pushed'); 
 
      infowindow.setContent(content); 
 
      infowindow.open(map, marker1); 
 
      map.panTo(this.getPosition()); 
 
     } 
 
    })(marker1, content)); 
 
} 
 

 
/** 
 
* Function to filter markers by category 
 
*/ 
 

 
filterMarkers = function (category) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
     marker = gmarkers1[i]; 
 
     // If is same category or category not picked 
 
     if (marker.category == category || category.length === 0) { 
 
      marker.setVisible(true); 
 
     } 
 
     // Categories don't match 
 
     else { 
 
      marker.setVisible(false); 
 
     } 
 
    } 
 
} 
 

 
filterMarkersBS = function (categorybs) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
     marker = gmarkers1[i]; 
 
     // If is same category or category not picked 
 
     if (marker.categorybs == categorybs || categorybs.length === 0) { 
 
      marker.setVisible(true); 
 
     } 
 
     // Categories don't match 
 
     else { 
 
      marker.setVisible(false); 
 
     } 
 
    } 
 
} 
 

 
// Init map 
 
initialize();

#map-canvas { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
     <script type="text/javascript"> 
 
     google.load("maps", "3",{other_params:"sensor=false"}); 
 
     </script> 
 
<div id="map-canvas"></div> 
 
<select id="type" onchange="filterMarkers(this.value);"> 
 
    <option value="">BEST FOR (SHOW ALL)</option> 
 
    <option value="BABIES">BEST FOR BABIES</option> 
 
    <option value="TODDLERS">BEST FOR TODDLERS</option> 
 
    <option value="KIDS">BEST FOR KIDS</option> 
 
    <option value="ALL">BEST FOR ALL</option> 
 
</select> 
 
<br> 
 
<select id="type" onchange="filterMarkersBS(this.value);"> 
 
    <option value="">BABY SWINGS (SHOW ALL)</option> 
 
    <option value="BSYES">HAS BABY SWINGS</option> 
 
    <option value="BSNO">DOES NOT HAVE BABY SWINGS</option> 
 
</select>