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();
});
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.