var gmarkers = [];
var htmlside = [];
var mapmarkers = [];
var transitMarkers = [];
var map;
var windowIsOpen;
//////////////////////////////////////
/// this is our basic map loader
///////////////////////////////////////
function mapload() {
resizeMap(); // set our map div to the correct size
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
var Latitude = document.getElementById('Latitude').value;
var Longitude = document.getElementById('Longitude').value;
var InitZoom = document.getElementById('InitZoom').value;
// we're using this to figure out if we want comparisons (seller)
// or favorites (buyer)
// frankly, we could do featured this way too.
var InitPropertyType = document.getElementById('PropertyType').value;
// the zoom is not working right for some reason. we'll do math
// on it and make it a number
var zoomToSet = 19 - InitZoom;
// now set the map coords.
map.setCenter(new GLatLng(Latitude,Longitude), zoomToSet);
findProperties(map, InitPropertyType);
}
}
//////////////////////////////////////
/// this is the main Ajax property fetcher
//////////////////////////////////////
function findProperties(map,InitPropertyType) {
resizeMap();
// ===== Start with an empty GLatLngBounds object =====
var bounds = new GLatLngBounds();
// start up the Ajax
var request = GXmlHttp.create();
/// warn people to be patient...
document.getElementById("pleasewait").innerHTML = "Please Wait...";
var client_id = document.getElementById("client_id").value;
var url;
if (InitPropertyType == 'favorites') {
url = '/getFavorites.cgi?client_id=' + client_id;
}
else if (InitPropertyType == 'comparisons') {
url = '/getComparisons.cgi?client_id=' + client_id;
}
else if (InitPropertyType == 'featured') {
url = '/getFeatured.cgi?client_id=' + client_id;
}
var bounds = new GLatLngBounds();
request.open("GET", url, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
//our markers length will match our other taglengths.
var markers = [];
markers = xmlDoc.documentElement.getElementsByTagName("marker");
if (markers.length < 1) {
document.getElementById("pleasewait").innerHTML = 'No Properties Meet Your Criteria';
clearOldOverlays();
document.getElementById("mapsidelist").innerHTML = '';
return;
}
//if (markers.length > 1) {
clearOldOverlays();
//}
gmarkers = [];
htmlside = [];
mapmarkers = [];
document.getElementById("mapsidelist").innerHTML = " ";
var sidelisthtml = '
';
for (var i = 0; i < markers.length; i++) {
//alert("doing marker number " + i);
var listingid = markers[i].getAttribute("listingid");
var longi = parseFloat(markers[i].getAttribute("lng"));
var lati = parseFloat(markers[i].getAttribute("lat"));
var icontype = markers[i].getAttribute("icontype"); // transit has transit.
var addressx = markers[i].getAttribute("address"); // has station things
var address = addressx.replace(/%26/, "&");
var citystate = markers[i].getAttribute("citystate"); // has station things
var client_id = markers[i].getAttribute("client_id");
var beds = markers[i].getAttribute("beds");
var baths = markers[i].getAttribute("baths");
var PictureURLx = markers[i].getAttribute("picture"); // has transit lines
var PictureURLy = PictureURLx.replace(/%3F/g, "?");
var PictureURL = PictureURLy.replace(/%26/g, "&");
var listprice = markers[i].getAttribute("listprice"); // has station name
var iconcolor = markers[i].getAttribute("iconcolor");
var lotsize = markers[i].getAttribute("lotsize");
var sfootage = markers[i].getAttribute("sfootage");
var listingbroker = markers[i].getAttribute("listingbroker");
var iconWidth = markers[i].getAttribute("iwidth");
var iconHeight = markers[i].getAttribute("iheight");
var iconURL = markers[i].getAttribute("iconurl");
var listingarea = markers[i].getAttribute("listingarea");
var icon = getMyIcon(icontype,iconcolor,iconURL,iconWidth,iconHeight);
/////////////////////////////////
/// Now that we know all this stuff, go make a marker
/////////////////////////////////
var marker;
marker = makeMarker(longi,lati,i,listingid,map,icon,icontype,iconcolor,address,citystate,client_id,beds,baths,PictureURL,listprice,listingbroker,lotsize,sfootage,InitPropertyType,listingarea);
////////////////////////////////////////////////////////
// add marker to the array so that we can remove it later
////////////////////////////////////////////////////////
mapmarkers.push(marker);
////////////////////////////////////////////////////////
// add the marker to the map
////////////////////////////////////////////////////////
map.addOverlay(marker);
////////////////////////////////////////////////////////
// extend our boundaries
////////////////////////////////////////////////////////
bounds.extend(new GLatLng(lati, longi));
//alert("done adding overlay for marker number " + i);
/////////////////////////////////////////////////////////
// do the sidelist item
////////////////////////////////////////////////////////
var thisside = getSidelist(marker,listprice,listingarea);
sidelisthtml = sidelisthtml + thisside;
}
////////////////////////////////////////////////////////
// do points of interest. we already have the markers
// they are called poimarkers.
////////////////////////////////////////////////////////
markers = xmlDoc.documentElement.getElementsByTagName("poimarker");
if (markers.length > 0) {
for (var i = 0; i < markers.length; i++) {
//alert("doing marker number " + i);
var poiname = markers[i].getAttribute("listingid");
var longi = parseFloat(markers[i].getAttribute("lng"));
var lati = parseFloat(markers[i].getAttribute("lat"));
var icontype = markers[i].getAttribute("poitype");
var name = markers[i].getAttribute("poiname");
var iconWidth = markers[i].getAttribute("iwidth");
var iconHeight = markers[i].getAttribute("iheight");
var iconURL = markers[i].getAttribute("iconurl");
var shadowFile = markers[i].getAttribute("shadowimage");
var shadowWidth = markers[i].getAttribute("shadoww");
var shadowHeight = markers[i].getAttribute("shadowh");
var icon = makeMyPoiIcon(icontype,iconcolor,iconURL,iconWidth,iconHeight,shadowFile,shadowWidth, shadowHeight);
/////////////////////////////////
/// Now that we know all this stuff, go make a POI marker
/////////////////////////////////
var marker;
marker = makePoiMarker(longi,lati,i,map,icon,icontype,name);
////////////////////////////////////////////////////////
// add marker to the array so that we can remove it later
////////////////////////////////////////////////////////
mapmarkers.push(marker);
////////////////////////////////////////////////////////
// add the marker to the map
////////////////////////////////////////////////////////
map.addOverlay(marker);
}
}
/// complete the sidebar
sidelisthtml = sidelisthtml + "<\/table>";
/// put up the markers.
// add the sidebar.
document.getElementById("mapsidelist").innerHTML = sidelisthtml;
// this reads the stuff for the legend. we're going to have
// to just deal with this once.
var legendcolors = [];
legendcolors = xmlDoc.documentElement.getElementsByTagName("legendtext");
document.getElementById("gray").innerHTML = legendcolors[0].getAttribute("gray");
document.getElementById("richerblue").innerHTML = legendcolors[0].getAttribute("richerblue");
document.getElementById("bluegreen").innerHTML = legendcolors[0].getAttribute("bluegreen");
document.getElementById("green").innerHTML = legendcolors[0].getAttribute("green");
document.getElementById("yellowgreen").innerHTML = legendcolors[0].getAttribute("yellowgreen");
document.getElementById("yellow").innerHTML = legendcolors[0].getAttribute("yellow");
document.getElementById("orange").innerHTML = legendcolors[0].getAttribute("orange");
document.getElementById("red").innerHTML = legendcolors[0].getAttribute("red");
var lngCenter = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) / 2;
var latCenter = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) / 2;
var center = new GLatLng(latCenter,lngCenter);
var zoomBounds = map.getBoundsZoomLevel(bounds);
var adjustedZoom;
// if (InitPropertyType != 'featured') {
// adjustedZoom = zoomBounds - 1;
// }
// else {
adjustedZoom = zoomBounds;
// }
map.setCenter(center, adjustedZoom);
if (InitPropertyType == 'favorites') {
document.getElementById("usermessage").innerHTML = "Not all your favorites may appear on the map. We do not have the Latitude and Longitude for every listing in our database.";
}
if (InitPropertyType == 'comparisons') {
listblurb = xmlDoc.documentElement.getElementsByTagName("listingblurb");
document.getElementById("usermessage").innerHTML = listblurb[0].getAttribute("blurbtext");
}
// more listings exist?
//document.getElementById("moreexist").innerHTML = listblurb[0].getAttribute("blurbtext");
/// done with setting the legend.
document.getElementById("pleasewait").innerHTML = " ";
}
}
request.send(null);
}
function getSidelist(marker,listprice,listingarea) {
var color = "";
var iconcolor = marker.iconcolor;
var beds = marker.beds;
var baths = marker.baths;
var number = marker.id;
var icontype = marker.icontype;
var address = marker.address;
var html = marker.html;
var buckstoggle = marker.reciprocity;
if (iconcolor == 'gray') { color = "#B0B0B0"; }
else if (iconcolor == 'bluegreen') { color = "#75CBCA"; }
else if (iconcolor == 'slateblue') { color = "#7D87C4"; }
else if (iconcolor == 'richerblue') { color = "#0067B2"; }
else if (iconcolor == 'green') { color = "#3BAE46"; }
else if (iconcolor == 'yellowgreen') { color = "#C7EE57"; }
else if (iconcolor == 'yellow') { color = "#FFF800"; }
else if (iconcolor == 'orange') { color = "#FF951B"; }
else if (iconcolor == 'red') { color = "#F20704"; }
if (icontype == 'LOT' || icontype == 'COM') {
beds = "0";
baths = "0";
}
var sidebarhtml;
if (buckstoggle == 2) {
sidebarhtml = '
';
}
else if (buckstoggle == 1) {
// bucks county
// alert("we're doing bucks for icon type : " + icontype);
if (icontype == 'transit') {
// adjust sidebar html for icon.
// alert("sidebar for a transit item");
sidebarhtml = '
';
}
}
gmarkers[number] = marker;
htmlside[number] = html;
return sidebarhtml;
}
function myclick(i) {
//alert("opening pop-up " + i);
gmarkers[i].openInfoWindowHtml(htmlside[i]);
}
function highlightSidebar(propid) {
var sideListItem = document.getElementById(propid);
var testcolor = sideListItem.getAttribute("bgcolor")
sideListItem.setAttribute("bgcolor") = "#F5F5F5";
testcolor = sideListItem.getAttribute("bgcolor")
}
function makeMarker(longitude,latitude,number,listingid,map,icon,icontype,iconcolor,address,citystate,client_id,beds,baths,PictureURL,listprice,listingbroker,lotsize,sfootage,InitPropertyType,listingarea) {
var point = new GLatLng(latitude, longitude); // create the point
var marker = new GMarker(point,icon); // create our marker
var favoriteslink;
if (client_id == 1 || client_id < 1 || InitPropertyType == 'favorites') {
//not a real client
favoriteslink = "";
}
else {
favoriteslink = "add to favorites";
}
// html for popup. this is so so ugly.
var html;
if (listingarea != null) {
html = '
