根据选定的DropDown更新标记

时间:2016-03-14 07:25:43

标签: javascript jquery google-maps google-maps-api-3 laravel-5

大家好我正在尝试根据所选类别更新标记,在警报中我收到所选下拉列表现在我正在尝试将所选值传递到谷歌地图以过滤标记。请指导我,我需要帮助

HTML:

 <select id="property_id" name="property_type" onchange="property_type(this.options[this.selectedIndex].value)">
        <option selected>Property Type</option>
        <option value="Single_Family_Home">Single Family Home</option>
        <option value="Multi_Family_Home">Multi Family Home</option>
        <option value="Condominium">Condominium</option>
        <option value="Townhome">Townhome</option>
 </select>

谷歌地图Javascript

<script language="javascript" type="text/javascript">
 //globally declared the array and variables
  var pubvar1 = 0;
  var pubvar2 = 0;
  var locations = [];
</script>

@foreach($row as $val)
 <script language="javascript" type="text/javascript">
    pubvar1++;

    //Fetching longitude and latitude and other details from database 
    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}}", property_type: "{{$val->property_type}}"};

    //alert(locations[pubvar1].property_type);

 </script>
@endforeach  

<script language="javascript" type="text/javascript">
        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;

 function property_type(selectControl)   {
    //here I am getting the Selected Dropdown
    alert(selectControl);
  }

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

0 个答案:

没有答案