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