Google Maps filtering by multiple regions (polygons)?

I am working with a map in which I am interested in having multiple regions selected and when those regions have been selected they only pins that show are those regions. Essentially, the site currently has the “tags” set up so when you click on a region, the corresponding tag displays under the filter. After the filter is added each marker is compared and if that marker is not in a region the tag is removed. Currently, the map was functioning when selecting a drop down item and comparing this item with the polygon region for each marker. However, the moment you add another loop for each tag the filtering no longer works. Below is my code and the website link is at http://swishercorbett.com.test.marketmagnitude.com/listings/?map=1

    var DistrictVal = jQuery('#District').val(); 
    var baths = jQuery('#baths').val();
    var bedrooms = jQuery('#bedrooms').val(); 
    //var amount = jQuery('listings_per_page')

    var minprice = jQuery('#minPriceB').val();
    var maxprice = jQuery('#maxPriceB').val();

    jQuery('#loading').show(); //show the loading icon on start before a selection is made 
/*     ===================================================================================================================*/ 

    var stopIt = [];
    var bad; 

    var DistrictLen = jQuery('#District option').length; // determine how many items there are 
    for(var i = 0; i <= DistrictLen; i++) //loop through each item in the drop down 
    {
        var optionText = jQuery('#District option').eq(i).text(); //get the text and put in variable 
    }

    //loop through each filter tag added
    // if the filter tag matches drop down selection
    // make sure not to add the new tag

    var districtTags = jQuery('#districtTags #districtTag')
    var tagLength = districtTags.length; 

    for (var z = 0; z <= tagLength; z++)
    {
        if (districtTags.eq(z).text() == DistrictVal)
        {
            stopIt.push(1); //there is a match 
        }
        else{
            stopIt.push(0);  // there is not a match 
        }
    }
    var bad = jQuery.inArray(1, stopIt); 
    if (bad == -1)
    {
        jQuery('#districtTags').append('<div id="tag"><div id="districtTag">'+DistrictVal+'</div><span id="remove-tag"> X</span></div>');
        tags.push(DistrictVal); //get all of the tags and send them to mapChange() which is in jGMap.js 
        //console.log(tags);
    }
    jQuery('#remove-tag').live('click',function()
    {
    jQuery(this).parent().empty();
    tags = [];

    }); 
/* ===================================================================================================================*/        

//New Ajax request indepentant from the below Ajax request which 
// is only used to retrieve listings by location

    infoWindow = new google.maps.InfoWindow({size: new google.maps.Size(150, 100)});
    var mapOptions = {
        center: new google.maps.LatLng(39.977735,-86.141566),
        zoom: 11,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas-listing"), mapOptions);
    geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, infowindow: infoWindow});
    geoXml.parse('/wp-content/themes/swishercorbett/js/SC Map.kml');
    /* ================================================================================ */  

    //Adds inforation to the database with the address and the latitude and longitude
    jQuery.ajax({
            async: 'false',
            url: 'http://swishercorbett.com.test.marketmagnitude.com/wp-content/plugins/john-    real-estate/mapinformation.php', //not a real page 
            type: 'GET',
            dataType: 'json',
            data: {jbaths: baths, jbedrooms: bedrooms, jminprice: minprice, jmaxprice: maxprice},
            //data: {jaddr: addr, jlat: lat, jlon: lon}, //uncomment after use! 
            success: function(e)
            { // get each address 
                jQuery(e).each(function(index) 
                {
                    // e[0] is first item repeated over itself 
                        var text = e[index][0]; //get the address of each listing 
                        //console.log(text);
                        var cords = e[index][1].split(','); //get the latitude and longitude and spit
                        var lat = parseFloat(cords[0]); //latitude with decimal points
                        var lon = parseFloat(cords[1]); // longitude with decimal points 

                        infowindow = new google.maps.InfoWindow();
                        marker = new google.maps.Marker( //add a new marker for each item in JSON array 
                        {
                            position: new google.maps.LatLng(lat, lon), // create a new position
                            map: map // add the position to the map 
                        });

                    /* ============================================================================ */  
                      for(var i = 0; i<geoXml.docs[0].gpolygons.length; i++ )
                      {
                        // if any of the tags match show those districts, remove the rest
                        for( var z = 0; z<= tags.length; z++)
                        {
                             if( geoXml.docs[0].placemarks[i].name == tags[z] ) //DistricVal 
                             {
                                if (geoXml.docs[0].gpolygons[i].Contains(marker.getPosition()) ) 
                                 { //if the marker is in the first quadriant then keep it, else remove the marker from the map
                                    marker.setMap(map);
                                    setTimeout(function(){ jQuery('#loading').hide();   }, 500); 
                                 }
                                  else
                                  {
                                    marker.setVisible(false);
                                    //console.log('does not contain');
                                  }
                             }
                             else
                             {
                                //alert('there is not a kml region with that name')
                             }
                         }
                      }
                    /* ============================================================================ */   
                        //console.log(google.maps.geometry.poly.containsLocation(cords, Midtown)); 
                        google.maps.event.addListener(marker, 'click', (function(marker, index) 
                        {
                            return function() 
                            {
                                infowindow.close(map,marker);
                                infowindow.setContent(e[index][0]);
                                infowindow.open(map, marker);
                            }
                        })(marker, index));
                });
            }
        }).done(function(){
            jQuery('#loading').hide();
        });

Related posts

Leave a Reply

1 comment

  1. Use this library to manage marker clustering and it would help optimize your map view (this answer should help integrate).

    Also, the code in the snippet works well with filtering usually. You can try it out. Might just do the trick.

    // Get all markers from the php document markers.php ( output 
    simulates json object ) 
    $('#map-canvas').gmap().bind('init', function(evt, map) { 
    $.getJSON( 'http://example.php', 
    function(data) { $.each( data.markers, function(i, marker) { 
    $('#map-canvas').gmap('addMarker', {'tags': marker.tags, 'position': new google.maps.LatLng(marker.latitude, marker.longitude),'bounds': true}).click(function() {  
                              
    // Declares what you want to show in the info window when marker is clicked 
                              
    $('#map-canvas').gmap('openInfoWindow', { 'content': '<strong>' + 
    marker.title + '</strong><br/>' + marker.address + '<br/>' + 
    marker.phone + '<br/><br/>' + marker.tags }, this); 
                            });  
    // Filter map 
    $('#map-canvas').gmap('find', 'markers', { 'property': 'tags', 
    'value': ['baths', 'bedrooms', 'minprice', 'maxprice'], 'operator':'AND' }, function(marker, isFound) { 
          if ( isFound ) { 
                 marker.setVisible(true); 
                    } else { 
                            marker.setVisible(false); 
                    } 
            }); 
    
    
              }); 
            }); 
    });        // End map function