Update Markers using Dropdown without reloading google map

问题

Hello everyone through this script I am loading all the markers in map after that I have 5 dropdowns on top of my page , Initially i have loaded all markers from database now i want to filter markers on the basis of selected dropdown how i can do please suggest something thank you in advance

check this image for more clarity
Here is my script to load google map

  <script language="javascript" type="text/javascript">
      var pubvar1 = 0;
      var pubvar2 = 0;
      var locations = [];
 // these things i am returning from my controller see in markers 
 //   i am populating all the marker in map
 @foreach($row as $val)

    pubvar1++;
    locations[pubvar1] = {lat: {{$val->lat}}, lng: {{$val->log}}, id: {{$val->id}},adr: "{{$val->address}}", psz: "{{$val->property_size}}", img: "{{$val->image}}", state: "{{$val->state}}", city: "{{$val->city}}"};
 @endforeach  

          var map;
          var geocoder;

        function InitializeMap() {
            var latlng = new google.maps.LatLng(13.0827, 80.2707);
            var myOptions = {
                zoom : 7,
                center : latlng,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                disableDefaultUI : false
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
        }
        //window.onload = InitializeMap;

        $(window).load(function() {         
            loadLocation();         
        });

        function loadLocation() {
                $.urlParam = function(name) {
                var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
                return results[1] || 0;
                }
            geocoder = new google.maps.Geocoder();
            InitializeMap();
            var address = $.urlParam('address');
            geocoder.geocode({
                'address' : address
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map : map,
                        icon : 'hidden',

                        position : results[0].geometry.location
                    }); 

                   // Add circle overlay and bind to marker
                    var circle = new google.maps.Circle({
                    map: map,
                    radius: 250000,    // metres
                    fillColor: '#00BFFF',
                    strokeColor: '#04bce0'


                    });
                    circle.bindTo('center', marker, 'position');

                    // Multiple Markers
                    // Display multiple markers on a map
                    var infoWindow = new google.maps.InfoWindow;
                    for(var i=1; i<=pubvar1; i++){

                        myLatLng = {lat: locations[i].lat, lng: locations[i].lng};
                        var html = "<div><br><b>Address</b>:"+locations[i].adr+",<br>"+locations[i].city+","+locations[i].state+"<br><b>Property Size</b>:"+locations[i].psz+"<br><img style='height:80px; width:150px;' src='images/test/"+locations[i].img+"' /><br> <a href=property_details?id"+locations[i].adr+"><b>More Details</b></a></div>" ;
                        //alert(html);
                        marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            title: 'Hello World!',
                            icon: 'images/marker.png'
                        });
                        bindInfoWindow(marker, map, infoWindow, html);                                      
                    }   

                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }

This is my Controller

        // property details filter in right side on map page for Buy
public function landing_property()
    {  
            $state = Input::get('address');

            $display=DB::table('property_details')
            ->where('state',$state)
            ->Where('sale_or_rent', '=', 'sale')
            ->get();

        if(count($display)!=0)
            {    
                return view::make('/pages/property_home', array('row'=>$display));
            }
            else
            {
                session::flash('status', 'No Records Found!!!');
                return view::make('/pages/property_home', array('row'=>$display));
            }

    }

来源：https://stackoverflow.com/questions/35837349/update-markers-using-dropdown-without-reloading-google-map