<script language="javascript" type="text/javascript">
var pubvar1 = 0;
var pubvar2 = 0;
var locations = [];
</script>
@foreach($row as $val)
<script language="javascript" type="text/javascript">
pubvar1++;
// locations[2] = {lat: 12.9758, lng: 80.2205};
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_price: "{{$val->property_price}}", property_room: "{{$val->property_room}}", property_baths: "{{$val->property_baths}}", property_type: "{{$val->property_type}}"};
//alert(locations[pubvar1].img);
// alert('{{$val->id}}');
</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;
</script>
<script>
$(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/"+locations[i].id+"><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);
});
}
</script>
this is my html code
<div class="SearchFilter">
<select id="min" name="min" onchange="min_price(this.value)">
<option selected>Min Price</option>
<option value="20000">$20K</option>
<option value="40000">$40K</option>
<option value="60000">$60K</option>
<option value="80000">$80K</option>
<option value="100000">$100K</option>
</select>
To
<select id="max_price" name="max" onchange="max_price(this.value)">
<option selected>Max Price</option>
<option value="20000">$20K</option>
<option value="40000">$40K</option>
<option value="60000">$60K</option>
<option value="80000">$80K</option>
<option value="100000">$100K</option>
</select>
<select id="beds" name="beds" onchange="beds(this.value)">
<option selected>Any Beds</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="bath" name="baths" onchange="baths(this.value)">
<option selected>Any Baths</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="property_id" name="property_type" onchange="property_type(this.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>
</div>
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community