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.