javascript - フォームの選択に基づいてマーカーを表示/非表示しても何も起こりません

Question

ユーザーが選択ボックスから選択した機能のタイプに基づいて、 Google マップでマーカー (家屋とコンドミニアム) を表示/非表示 (または単に配置 - フィルター) しようとしてい#featuresます。

たとえば、ユーザーが「プール」機能を選択してSubmitボタンをクリックすると、この機能を持つマーカー (住宅/コンドミニアム) のみが表示され、プールがないものは非表示になります。

残念ながら、コードを実行しても、マップ上で何も起こらない/変更されません。

家屋とコンドミニアムのJSON (マーカー変数内に保存):

({
condos:
    [
        {Address:'123 Fake St.', Lat:'56.645654', Lng:'23.534546', features:['Swimming Pool','BBQ','..etc..']},
        {... another condo with features ...},
        {... another condo with features ...},
        ...
    ],
houses:
    [
        {Address:'1 Main Ave.', Lat:'34.765766', Lng:'27.8786674', features:['...','...']},
        {... another house with features ...},
        {... another house with features ...},
        ...
    ]
})

JS/jQueryコード:

$('#filterform').on('submit', function(e) {
    e.preventDefault(); // prevent page from reloading when form is submitted

    $('#map').gmap('set', 'bounds', null); // reset map's bounds
    $('#map').gmap('closeInfoWindow'); // close opened infoWindows

    // store selected features from the 'features' select box into features variable as array
    var features = $("#features").val();

    // for each element of type house/inside houses array
    $(markers.houses).each(function(index, elem){
        //if a house has one of the selected features from 'features' select box - show it on the map, otherwise hide it
        if(jQuery.inArray(features, elem.features) !== -1 || jQuery.inArray(features, elem.features) > -1){
            this.setVisible(true);
        }else{
            this.setVisible(false);
        }
    });

    // ... repeat the same for condos type elements ...
});

アップデート：

マップ上にマーカーを作成/配置するためのJS/jQueryコード:

$('#map').gmap(mapOptions).bind('init', function(){             
    $(markers.houses).each(function(index, elem){
        $('#map').gmap('addMarker', {
            'position': new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng)),
            'bounds': true,
            'icon': 'house.png'
        });
    });
    $(markers.condos).each(function(index, elem){
        $('#map').gmap('addMarker', {
            'position': new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng)),
            'bounds': true,
            'icon': 'condo.png'
        }); 
    });
});

Answer 1

$(markers.houses).each(function(index, elem){
    //if a house has one of the selected features from 'features' select box - show it on the map, otherwise hide it
    if(jQuery.inArray(features, elem.features) !== -1 || jQuery.inArray(features, elem.features) > -1){
        this.setVisible(true);
    }else{
        this.setVisible(false);
    }
});

あなたのコンテキストでは、 ' this' はマーカー要素ではなく、->markers.housesと同じ配列要素です。elemthis === elem

更新:次の行でマーカーを追加します。

$('#map').gmap(mapOptions).bind('init', function(){     
    markers.housesMarkers = [];     //Adding new property that holds Markers    
    $(markers.houses).each(function(index, elem){
            var position =  new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng));
            var m = new google.maps.Marker({ position:position ,
                                            icon: 'house.png' })
            //Adding markers to array
            markers.housesMarkers.push( m );
            m.setMap( $('#map').gmap('get','map') );

            $('#map').gmap('addBounds',m.getPosition());  ///'bound:true' option
    });
    markers.condosMarkers = [];      //Adding new property that holds Markers
    $(markers.condos).each(function(index, elem){
            var position =  new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng));
            var m = new google.maps.Marker({ position:position ,
                                            icon: 'condo.png' })
            //Adding markers to array
            markers.condosMarkers.push( m );
            m.setMap( $('#map').gmap('get','map') );

            $('#map').gmap('addBounds',m.getPosition());  ///'bound:true' option
    });
});

次に、次のコードを使用してマーカーを「フィルター」(表示/非表示) します。

$(markers.houses).each(function(index, elem){
    //if a house has one of the selected features from 'features' select box - show it on the map, otherwise hide it
    if(jQuery.inArray(features, elem.features) !== -1 || jQuery.inArray(features, elem.features) > -1){
        markers.housesMarkers[index].setVisible(true);   //for condos -> 'marker.condosMarkers'
    }else{
        markers.housesMarkers[index].setVisible(false);  //for condos -> 'marker.condosMarkers'
    }
});

Answer 2

this.setMap(null); を試してください。/ this.setmap(マップ);