Select menu to toogle different points on a map

by chrislkeller

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div style="margin-bottom: 10px;">
    <select id="search-string" onchange="changeMap(this.value);">
    <option value="">All</option>
    <option value="small_red">red markers</option>
    <option value="small_green">green markers</option>

  </select>
</div>

<div id="map-canvas"></div>

CSS

#map-canvas {height: 700px; width: 600px;}

JavaScript

var map;
var layer;
var tableId = '1qttRa8xcduTeRiqecGzF_ryXb3T8kDa4xW6P8eI';

//begin main function
    $(document).ready(function() {
        initialize();
    });
//end main function

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(41.84373386484505, -87.65457545507815),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        draggable: true,
        mapTypeControl: false,
        navigationControl: true,
        panControl: false,
        scrollwheel: false,
        streetViewControl: false,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
    });
    
    //set initial layer to the gov map
    layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: tableId
        }
    });

    layer.setMap(map);

}
//end write map

    //begin change layer
    function changeMap() {
    var searchString = document.getElementById('search-string').value;

        if (searchString) {
            layer.setOptions({
                query: {
                    select: 'geometry', 
                    from: tableId,
                    where: "closing = '" + searchString + "'"
                }
            });
        
        } else {
            
            layer.setOptions({
                query: {
                    select: 'geometry',
                    from: tableId
                }
            });
        }
    }