0

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

    }
Rahul
  • 17
  • 7
  • your information are not enough to understand your question, please elaborate it little more. with proper screen shots. highlight selected area and drop in image. – Qazi Mar 07 '16 at 07:17
  • read this thread, I hope that might solve your problem. [Link 1](http://stackoverflow.com/questions/8840727/api-v3-update-marker-position-dynamically) [link2](http://stackoverflow.com/questions/25490252/howto-dynamically-update-markers-from-json-on-google-maps) [link3](https://productforums.google.com/forum/#!msg/maps/qTp9XnMCkMc/h5rRJ28T47kJ) [Link 4](https://www.sundoginteractive.com/blog/working-with-dynamic-markers-in-google-maps-js-api) – Qazi Mar 07 '16 at 07:22
  • also have a look into this [Link](http://stackoverflow.com/questions/3922764/load-google-maps-v3-dynamically-with-ajax) – Qazi Mar 07 '16 at 08:34
  • hi Didn't got any solution............... – Rahul Mar 07 '16 at 09:53
  • Hi I'm trying to pass selected value on onchange but how I can pass selected value to google map, To load content in right side i am passing my value using jquery please suggest something. really i need help – Rahul Mar 09 '16 at 06:01
  • Please someone help, I am struggling..... – Rahul Mar 10 '16 at 06:56
  • I never working on Google maps, so dont know, how to help. just tell me, do you know any method, through which we can pass the latitude and longitude to any google map method ? – Qazi Mar 10 '16 at 07:06
  • thanxx for your reply In my right side bar, i am using seperate jquery and seperate function in my controller to load the content now i want to pass request in map also just check these link http://jsfiddle.net/peter/drytwvL8/ and this one http://labs.traviswilliamson.me/Marker-Filtering-Google-Maps/ – Rahul Mar 10 '16 at 07:45
  • are you working with latitude and longitude to pass to google map ? what you want to return for google map from your controller? – Qazi Mar 10 '16 at 09:20
  • yes initially i am loading all the markers in google map, after that i want to return all the properties markers corresponding to my selected dropdown – Rahul Mar 10 '16 at 09:30
  • can you give me an example of your google map controller method response ? means which items you are returning from there ? – Qazi Mar 10 '16 at 09:45

0 Answers0