Search Form for Google Maps, using a multiselect dropdown

Question

I have shop names, type, lng, lat, etc stored in the database. Some of the shops are of more than one type, so the type field is like this: Shoe & Footwear|*|Children & Baby Wear.

My search form works for searching everything except for using the Multiselect to narrow down the results.

How can I get it to narrow down the results, depending on which Multiselect options are selected.

I have removed some of the search fields:

<form id="advanced-search" class="advanced-search search-collapsed clearfix" method="POST">
<select id="advsearch-boutiquetype" size="5" multiple="multiple" name="bform[boutique-drop-advanced][]" title="Boutique Dropdown">
    <option id="Bridal_Shops_Designers_box" value="Bridal_Shops_Designers">Bridal Shops & Designers</option>
    <option id="Children_Baby_Wear_box" value="Children_Baby_Wear">Children & Baby Wear</option>
    <option id="Ladies_Fashions_box" value="Ladies_Fashions">Ladies Fashions</option>
    <option id="Lingerie_box" value="Lingerie">Lingerie</option>
    <option id="Maternity_Wear_box" value="Maternity_Wear">Maternity Wear</option>
    <option id="Men's_Wear_box" value="Men's_Wear">Men's Wear</option>
    <option id="Shoe_Footwear_box" value="Shoe_Footwear">Shoe & Footwear</option>
</select>
<input id="advsearch-submit-button" class="submit" type="submit" value="search" onclick="update();">
</form>

The update() function:

function update() {

var km_miles    = jQuery("#km_miles").val();
var distance    = jQuery("#distance-input").val();
var street  = jQuery("#advsearch-street").val();
var city    = jQuery("#advsearch-city").val();
var county  = jQuery("#countyLocationAdvanced").val();
var country = 'Ireland';
var type    = jQuery("#advsearch-boutiquetype").val();

var search_address = street + ' ' + city + ' ' + county + ' ' + country;

if (km_miles === 'km') {
    var cal_km_miles = '6371';
} else {
    var cal_km_miles = '3959';
}

if(street || city || county){
           var geocoder = new google.maps.Geocoder();
           geocoder.geocode({ 'address': search_address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
        document.getElementById("countyLocation").value = county;
        jQuery('#countyLocation').val(county);
        getBoutiques(distance, results[0].geometry.location, cal_km_miles, type);

                } else {
                     alert('Geocode error: ' + status);
                }
           });
}

}

The function getBoutiques():

function getBoutiques(dst, center, cal_dst, btypes){
// Read the data
if (typeof center != 'undefined') {
var centerlat = center.lat();
var centerlng = center.lng();
}
  downloadUrl("index.php?option=com_boutiques_manager&view=boutiquesxml&county=" + document.getElementById("countyLocation").value.replace(/\s/g, '') + "&distance=" + dst + "&centerlat=" + centerlat + "&centerlng=" + centerlng + "&km_miles=" + cal_dst, function(doc) {
    var xmlDoc = xmlParse(doc);

// Clear previous overlays
marker = null;
marker = new Array();

    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      // create the marker
  var marker = createMarker(point);
    }

});

}

The downloadUrl() is returning this:

<markers>
<marker name="Test1" types="Ladies Fashions|*|Children & Baby Wear" profiletype="basic" city="Dublin 14" county="Co. Dublin" lat="53.29294764" lng="-6.229290545" count="" boutiqueimage="" link="boutique/page/1036/1"></marker>
<marker name="Test2" types="Ladies Fashions" profiletype="basic" city="Dublin 2" county="Co. Dublin" lat="53.342819" lng="-6.261962" count="" boutiqueimage="" link="boutique/page/1037/1"></marker>
<marker name="Test3" types="Men's Wear" profiletype="basic" city="Dublin 2" county="Co. Dublin" lat="53.345013" lng="-6.262699" count="" boutiqueimage="" link="boutique/page/1188/1"></marker>
</markers>

Database Query:

    $county = str_replace('.', '. ', $_GET['county']);
    $dst = (int) $_GET['distance'];
    $km_miles = $_GET['km_miles'];
    $btypes = $_GET['btypes'];
    $mylat = $_GET['centerlat'];
    $mylng = $_GET['centerlng'];


    // Initialize variables.
    $query = $db->getQuery(true);
    $query->select(
    'c.cb_profiletype, cp.user_id, cp.cbp_user_profile_id, cp.cbp_banned, cp.cbp_boutiquename, cp.cbp_city, '
    . 'cp.cbp_countylist, cp.cbp_boutiquetypes, cp.cbp_maplng as lng, cp.cbp_maplat as lat, cp.cbp_boutiqueimage, pt.b_max, null AS total, '
    . '( '.$km_miles.' * acos( cos( radians('.$mylat.') ) * cos( radians( cp.cbp_maplat ) ) * cos( radians( cp.cbp_maplng ) - radians('.$mylng.') ) + sin( radians('.$mylat.') ) * sin( radians( cp.cbp_maplat ) ) ) ) AS distance'
    );
    $query->from('#__comprofiler c');
    $query->join('INNER', '#__comprofiler_profiles cp ON cp.user_id = c.id');
    $query->join('INNER', '#__cb_profiletypes pt ON pt.alias = c.cb_profiletype');
    $query->where('cp.cbp_boutiquetypes <> \'\' AND cp.cbp_maplng <> \'\' AND cp.cbp_maplat <> \'\' AND cp.cbp_countylist <> \'\' AND cp.cbp_banned = \'0\' AND cp.cbp_enableboutique = \'Yes\' AND cp.cbp_countylist = \''.$county.'\'');
    $query->having('distance < \''.$dst.'\'');
    $query->order('cp.cbp_boutiquename ASC');

    $db->setQuery($query);
    $tmpList = $db->loadObjectList();

    // Set some values to make nested HTML rendering easier.
    foreach ($tmpList as $item) {
    if(trim($item->lat)!='' && trim($item->lng)!='' && $item->cbp_user_profile_id <= $item->b_max) {
        $list[][$item->user_id] = $item;
    }
    }

The types are in cp.cbp_boutiquetypes