0

I have been developing my first (real estate) web page for a few months and that's all my experience with programming... So forgive me if this is a stupid question. I have been following basically 3 tutorials (first, second and third).
They are kind of working together with a few problems.
The multiple and intersecting filtration is beyond my humble knowledge....
Here is what I need to accomplish with a example:
123 Abc St, Somewhere, USA 3 Bedrooms, 2 baths, 99999-123, Victorian, Probate, Garage:Yes, Fixer etc (there are other categories).
123 Abc St, Nowehere, USA, 3 Bedrooms, 2 baths, 99123-999, Victorian, Probate, Garage: No, etc, etc.

Here is the problem. I followed the famous Mike Williams's tutorial and got it working with my database. The problem is that a place is either a "golf", OR a "theater" OR a "office" in his tutorial. It's a good start. In my case, one house can be Victorian AND be on zip code 999-123. But It cannot pull the victorian on 99123-999. I know it may look trivial for some people but for me.... Google tutorials send readers to ACE hardware store locator. Tried to study view source....

My code is fairly large.
From the first tutorial, I get user's location and it pulls all open houses in drop down menu. User can get the route from his/her house to desired location/open house.

I then have a desired location with radius (second tutorial above), and it pulls the right locations (and I got an issue here with getting the routes, not subject of this question).

Third, I have categories by property style (Victorian, Craftsman, etc). It works, but not in a complex way. Cannot get to work with, Victorian, ZIPCode, 3 Bedrooms, etc. Only Style. **The whole code is written as such. ** Only Style.
I have tried to add other categories altogether with the the style, but then I get nothing. It would also be too cumbersome to have 20 different categories....
I will post the checkbox section here (it does not include another large chunk of the code). Is there any tutorial out there on how to develop intersecting filters on (this is also a question) the SQL or on the viewport? (I have spend countless weeks and months on google, yahoo, bing - they all have some bias in their search).
It would be nice to have dynamic load as people pan, zoom in and out, with the current open houses available in the viewport, but this is the next step, not now. Now all want is to filter database (or screen) based on multiple categories.
Any help would be great appreciated. Thank you in advance.

        var center = new google.maps.LatLng(38.713979, -122.073203);
        var geocoder = new google.maps.Geocoder();
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer(); 
        var showDetailsText = "Show Details";
        var markers = [];
        var side_bar_html = ""; 
        var map = null;
      // it makes a diference if we use one or the other. Check this later and    
    // need to choose one or the other                          
        var infoWindow;                                                 
        var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
 });


         function createMarker(latlng,address,html,style) {
                var contentString = html;
                var marker = new google.maps.Marker({
                    position: latlng,
                    //icon: gicons[category],
                   //shadow: iconShadow,
                    map: map,
                    title: address,
                    zIndex: Math.round(latlng.lat()*-100000)<<5
                    });

                     // === Store the category and name info as a marker properties ===
                    marker.mystyle = style;                                 
                    marker.myaddress = address;
                    markers.push(marker);



                    google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.setContent(html);  //creates the window
                    infoWindow.open(map, marker);
                    });



                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(contentString); 
                    infowindow.open(map,marker);
                    });
        }

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(style) {

        for (var i=0; i<markers.length; i++) {
          if (markers[i].mystyle == style) {
            markers[i].setVisible(true);

          }
        }
        // == check the checkbox ==
        document.getElementById(style+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(style) {
        for (var i=0; i<markers.length; i++) {
          if (markers[i].mystyle == style) {
            markers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(style+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

function clearOverlays() {
  setAllMap(null);
}


      // == a checkbox has been clicked ==
      function boxclick(box,style) {

        if (box.checked) {
          show(style);
        } else {
          hide(style);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(markers[i],"click");
      }


      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<markers.length; i++) {
          if (markers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + markers[i].myaddress + '<\/a><br>';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }



 function initiate() {

    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(37.714176,
-122.072890),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

    if(navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {

                            var userLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

                            geocoder.geocode( { 'latLng': userLocation }, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    document.getElementById('start').value = results[0].formatted_address;
                                }
                            });
                             map.setCenter(userLocation);
                        }, function() {
                            alert('Geolocation is supported, but it failed');
                        });
                    }

      // Read the data
      downloadUrl("xml_to_googleMIKE.php", function(doc) {
          var xml = xmlParse(doc);
          var markers = xml.documentElement.getElementsByTagName("marker");
          var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
           var markersNodes = xml.documentElement.getElementsByTagName("marker");

          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));

          var point = new google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
         //var category = markers[i].getAttribute("category");
          var city = markers[i].getAttribute("city");
          var html = "<b>"+address+"<\/b><p>"+city;
          var style = markers[i].getAttribute("style");

        //  var bedroom = markers[i].getAttribute("bedroom");
        // var price = markers[i].getAttribute("price");
         // var style = markers[i].getAttribute("style");
         // var special_info = markers[i].getAttribute("special_info");
          // create the marker
         var latlng = new google.maps.LatLng(
                      parseFloat(markersNodes[i].getAttribute("lat")),
                      parseFloat(markersNodes[i].getAttribute("lng")));
        var marker = createMarker(point,address,html,style);

            bounds.extend(latlng);
               }


    map.fitBounds(bounds);






        // == show or hide the categories initially ==
        show("Craftsman");
       show("Victorian");
        show("Ranch");
        show("Mid_Century")
        show("CA_Bungalow")


        // == create the initial sidebar ==
        makeSidebar();

         });


        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions_panel'));

        makeRequest('get_locations1.php', function(data) {

                        var data = JSON.parse(data.responseText);
                        var selectBox = document.getElementById('locationSelect');

                        for (var i = 0; i < data.length; i++) {
                            var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat (location.lng)); // this add the options in the drop menu

                            addOption(selectBox, data[i]['address'], [data[i]['address'],data[i]['zip_code']]);


                        }
                    });



 }

I believe I am in a wrong path with the code I have for the categories, but maybe I can get it to work.

2
Contributors
4
Replies
16
Views
4 Years
Discussion Span
Last Post by Gloak
0

Thank you for your replay.
Yes, I did, I saw both pages.

There are 3 "building blocks" in the code above, all working 100% when set apart.
1) geocode and pulling nearby markers (stores, whatever) and show route from geocoded user's location to one of "stores";
2) radius and finding markers ("stores") within a selected area
3) checkboxes where one marker can be X or Z

Problems when I tried to make just one code (it is not pasted above in its entirety) out 3 blocks/tutorials:
a) radius result (#2) would not create route (#1 + #2 above - #1 was still fine after the junction; I guess the radius search does not create an array (as coded) and route (as coded) may need an array?
b) intersecting boxes were not working - two houses, can be in New York, both can be Victorian, both can be 3 bedrooms, both can have indoor laundry and only the address is different. I just couldn't find a way to twist Mike William's tutorial to do such a thing. His tutorial is coded to show a house is either Victorian or Craftsman. Which is true!! but in a large database, a store will have multiple fileds (city, type, style, price, size, parking, etc) The more filters, the narrower the options. Yes, I have his tutorial working like: pullig all Victorians, pulling all Craftsman, etc. But I didn't manage to create multimple layers of filters (AND).
Thank you again for your interest.

0

Problems when I tried to make just one code (it is not pasted above in its entirety) out 3 blocks/tutorials:a) radius result (#2) would not create route (#1 + #2 above - #1 was still fine after the junction; I guess the radius search does not create an array (as coded) and route (as coded) may need an array?

I'm not sure what you are creating?

You can look at this code:

http://stackoverflow.com/questions/5755905/radius-nearest-results-google-maps-api

and also look at this demo:

http://jsfiddle.net/kjy112/3feUC/

0

Thank you for helping!
My radius search is working fine. It's a very specific problem that is not working: route/directions out of the radius result. I will try to select the necessary code to help. See below.
I have a radius search as follow (there is dynamic database so options/markers from the radius search are also dynamic as users insert/delete). The code below works, but when I try to seach for route/directions, the route/directions code (standard code per API v3) doesn't recognize my dropdown menu (which looks something like this at the "screen": 123 Xyz Ave,New York). I believe I need to turn it into an array, but I am not sure how to do it. Directions / javascript fails to read the values.

The route/direction button does work with another piece of the code, where it searches for all markers, but then the drop down menu is an array (see code above previously posted at beginning).
I need to find a away to upload my local server to a real server so people can look at the problem. Sorry about this. And thank you again.

    // beginning of *** R A D I U S *** 


      function searchLocations() {

                 var address = document.getElementById("addressInput").value;
                 var geocoder = new google.maps.Geocoder();
                 geocoder.geocode({address: address}, function(results, status) {
                   if (status == google.maps.GeocoderStatus.OK) {
                    searchLocationsNear(results[0].geometry.location);
                    boxclick(box,style);

                   } else {
                     alert(address + ' not found');
                   }
                 });
                 // add location in the dropdown menu
               locationSelect = document.getElementById("locationSelect");
                 locationSelect.onchange = function() {
                    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
                    if (markerNum != "none"){
                      google.maps.event.trigger(markers[markerNum], 'click');
                    }
                  };
                  }
 function clearLocations() {
        infoWindow.close();
         for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(null);
         }
         markers.length = 0;

         locationSelect.innerHTML = "";
         var option = document.createElement("option");
         option.value = "none";
         option.innerHTML = "See all results:";
         locationSelect.appendChild(option);
       }


    function searchLocationsNear(center) {
         clearLocations();

         var radius = document.getElementById('radiusSelect').value;
         var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
         downloadUrl(searchUrl, function(data) {
           var xml = parseXml(data);
           var markerNodes = xml.documentElement.getElementsByTagName("marker");
           var bounds = new google.maps.LatLngBounds();
           for (var i = 0; i < markerNodes.length; i++) {
            // var name = markerNodes[i].getAttribute("name");
             var address = markerNodes[i].getAttribute("address");
             var style = markerNodes[i].getAttribute("style");
            var city = markerNodes[i].getAttribute("city");
             var distance = parseFloat(markerNodes[i].getAttribute("distance"));
             var latlng = new google.maps.LatLng(
                  parseFloat(markerNodes[i].getAttribute("lat")),
                  parseFloat(markerNodes[i].getAttribute("lng")));

             createOption(address, city, distance, i);
             createMarker(latlng, address);
             bounds.extend(latlng);
           }
           map.fitBounds(bounds);


          });
        }



// creates dropdown menu for the radius search and apend something like Park Bvld(0.1) - 0.1 miles from central point.
    function createOption(address, city, distance, num) {
      var option = document.createElement("option");
      option.value = num;
      option.innerHTML = address +","+ city /*+","+ "(" + distance.toFixed(0) + ")"*/;
      locationSelect.appendChild(option);
    }

function downloadUrl(url, callback) {
  ............ Ajax etc. 
..........

// END OF RADIUS

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.