Google Maps:[storeLocator] use dropdown as featureFilter

See:http://stackoverflow.com/questions/14547192/dropdown-menu-using-the-storelocator-feature-in-the-store-locator-library-for/14554357#comment20328198_14554357

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="http://storelocator.googlecode.com/git/css/storelocator.css">
<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://storelocator.googlecode.com/git/js/store-locator.compiled.js"></script>
<script src="http://storelocator.googlecode.com/git/examples/medicare-dynamic-ds.js"
type="text/javascript"></script>

<h1>Medicare offices</h1>

<div id="panel"></div>
<div id="map-canvas"></div>
<p class="attribution">Medicare location data from <a href="http://data.gov.au/66">data.gov.au</a>,
    licensed under <a href="http://creativecommons.org/licenses/by/2.5/au/">CC-BY 2.5</a>
</p>

CSS

body {
    font-family: sans-serif;
}
#map-canvas, #panel {
    height: 500px;
}
#panel {
    width: 180px;
    float: left;
    margin-right: 10px;
}
#panel .feature-filter label {
    width: 130px;
}
p.attribution, p.attribution a {
    color: #666;
}

JavaScript

google.maps.event.addDomListener(window, 'load', function () {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(-20, 300),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
     var data = new MedicareDataSource; 
     //the element that wraps the panel
    var panelDiv = document.getElementById('panel');

    var data = new MedicareDataSource;

    var view = new storeLocator.View(map, data, {
        geolocation: false,
        features: data.getFeatures()
    });

    new storeLocator.Panel(panelDiv, {
        view: view,
        featureFilter: false
    });

    var features = view.getFeatures().asList(),
        //createe a select-element on the fly using jQuery
        list = $('<select/>')
        //put it somewhere, here it will be appended 
        //to the form created by the storeLocator
            .appendTo('#panel .storelocator-filter').
        //apply the change-handler for the select
        change(function () {
            view.set('featureFilter',
            new storeLocator.FeatureSet(features[this.selectedIndex]));
            view.refreshView();
        });
    //populate the  select with options
    $.each(features, function (i, o) {

        list.append(new Option(o.getDisplayName()));

    });


});