Google Maps API v3 afkrydsningsfelt / filterdatabase

For at vise en løsning på dit problem bruger jeg jQuery. Jeg læser og tegner også alle markørerne én gang. Når et filter anvendes (fjern markeringen af et afkrydsningsfelt), ændres markørens synlighed.

Opret først et array med markørpunkter og egenskaber som:

var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};

Gentag dette array, når du tegner en markør på kortet. Når du gør dette, skal du bygge et andet array med referencer til dine markører og det samme indeks som det første array:

$.each(markers, function(index, m) {


  markersmap[index] = new google.maps.Marker({
  position: new google.maps.LatLng(m.long,m.lat),
  map: map

  });   

});

Når dine filtre ændres, gentag det første array igen. Tjek dine filtre, og brug det andet array til at ændre markørernes synlighed.

For hvert filter kan du bruge noget som:

    $("input[name=stars]:checkbox").bind( "change", function() {

        var typevalue = $(this).val();
        var typechecked = $(this).is(':checked')
        $.each(markers, function(index, m) 
        {

                if(m.stars===parseInt(typevalue))
                {
                    if(typechecked) 
                    {
                        markersmap[index].setVisible(true);
                    } 
                    else
                    {
                        markersmap[index].setVisible(false);
                    }   
                }
        });
    });

Problemet her er, at du ikke ønsker at vise markøren, når et andet filter er aktiveret (ikke markeret). For at løse denne ændring if(typechecked) til if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')) . Hvis du har mange filtre, bliver dette for komplekst. Så refaktorer denne kode til:

$("input:checkbox").bind( "change", function() 
{
    $.each(markers, function(index, m) 
    {
        if(
        $("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
        $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')
        )
        {
            markersmap[index].setVisible(true);
        } 
        else
        {
            markersmap[index].setVisible(false);
        }
    })  
});

Jeg er ikke 100% sikker på, om dette også løser:"I mit tilfælde ville teatret bare være endnu et filter og kunne overlappe golfbanen". Måske en markør kan være bjerge OG ørken i dette eksempel? I så fald kan du lave en række af dine poperties som:

markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};

ændre din check i dette tilfælde til:

    if(
    $("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
    (
    ($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
    ($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
    )
    )

Eksempel:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Markers example</title>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {

  width: 500px;
  height: 300px;
}


</style>    
  </head>
  <body>
<div id="map-canvas"></div>

<div style="float:left;">Type:<br />
<input type="checkbox" name="type" value="mountains" checked="checked"/>Mountains<br />
<input type="checkbox" name="type" value="desert" checked="checked"/>Desert<br />
</div> 

<div style="float:left;">Stars:<br />
<input type="checkbox" name="stars" value="1" checked="checked"/>1<br />
<input type="checkbox" name="stars" value="2" checked="checked"/>2<br />
<input type="checkbox" name="stars" value="3" checked="checked"/>3<br />
</div>   

<br />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
    <script>

var markersmap = [];
var markers = [];       

function initialize() {


markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
markers[1] = {long:-26.363882,lat:132.044922,'type':['mountains'],stars:1};
markers[2] = {long:-27.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[3] = {long:-28.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[4] = {long:-25.363882,lat:130.044922,'type':['desert'],stars:1};
markers[5] = {long:-26.363882,lat:130.044922,'type':['desert'],stars:2};
markers[6] = {long:-27.363882,lat:130.044922,'type':['desert'],stars:3};
markers[7] = {long:-28.363882,lat:130.044922,'type':['desert'],stars:3};

  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882,131.044922),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



$.each(markers, function(index, m) {


      markersmap[index] = new google.maps.Marker({
      position: new google.maps.LatLng(m.long,m.lat),
      map: map

      });   

  });

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

$("input:checkbox").bind( "change", function() 
{
    $.each(markers, function(index, m) 
    {
        if(
        $("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
        (
        ($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
        ($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
        )
        )
        {
            markersmap[index].setVisible(true);
        } 
        else
        {
            markersmap[index].setVisible(false);
        }
    })  
});

</script>    


  </body>


</html>