Support the ongoing development of Laravel.io →
Database Views Blade
    <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>
Last updated 2 years ago.
0

Sign in to participate in this thread!

Eventy

Your banner here too?

techiva techiva Joined 9 Jan 2016

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.