var map; var markers = []; var mapCenter; var latLongCheck = 0; var lowerBound; var upperBound; var skipRedraw = false; var maxResults = 50; var formFields = ['lowPrice', 'highPrice', 'bedRooms','bathRooms','daysOnMarket', 'sqFt', 'acres', 'propTypeSelect']; // Will hold MarkerClusterer object var mc = null; // MarkerClusterer Options var mcOptions = mcOptions = { averageCenter : true, gridSize : 50, maxZoom : 15//, // There are 5 levels (sizes) for clusters available. You can set styling for each one. // The 'url' parameter links to cluster icon - you can link an empty image here and style the clusters with CSS // Notice 'width' and 'height' parameters - these are important for setting cluster sizes. /** styles : [{ 'textColor' : 'white', 'width' : 36, 'height' : 36, 'url' : 'http://example.com/images/map-marker-1.png', 'textSize' : 13, 'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif' }, { 'textColor' : 'white', 'width' : 40, 'height' : 40, 'url' : 'http://example.com/images/map-marker-2.png', 'textSize' : 13, 'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif' }, { 'textColor' : 'white', 'width' : 44, 'height' : 44, 'url' : 'http://example.com/images/map-marker-3.png', 'textSize' : 13, 'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif' }, { 'textColor' : 'white', 'width' : 48, 'height' : 48, 'url' : 'http://example.com/images/map-marker-4.png', 'textSize' : 13, 'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif' }, { 'textColor' : 'white', 'width' : 52, 'height' : 52, 'url' : 'http://example.com/images/map-marker-5.png', 'textSize' : 13, 'fontFamily': '"Helvetica Neue", Helvetica, Arial, sans-serif' } ] */ }; function gatherSearch(){ var params = ''; for (var i = 0; i < formFields.length; i++) { if (fieldExists($(formFields[i]))) { var fieldValue = $(formFields[i]).value; var fieldName = $(formFields[i]).name; if (fieldValue != '' && fieldValue != null) params = params+'&'+fieldName+'='+fieldValue; } } return params; } function googleLoad() { map = new google.maps.Map( document.getElementById('IDX-mapContainer'), { center: new google.maps.LatLng(45.031438, -84.656117), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }); map.enableKeyDragZoom({ visualEnabled: true, maxZoom : 18, visualPosition: google.maps.ControlPosition.LEFT, visualPositionOffset: new google.maps.Size(13, 0), visualPositionIndex: null, visualSprite: "http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png", visualSize: new google.maps.Size(20, 20), visualTips: { off: "Turn on", on: "Turn off" } }); google.maps.event.addListener(map, "click", function (event) { var latitude = event.latLng.lat(); var longitude = event.latLng.lng(); //alert(latitude+":"+longitude); }); //end addListener google.maps.event.addListener(map, "maptypechanged", function () { skipRedraw = true; }); google.maps.event.addListener(map, "moveend", function() { console.log( 'Moveend' ); if (skipRedraw == false) { var bounds = map.getBounds(); lowerBound = bounds.getSouthWest(); upperBound = bounds.getNorthEast(); loadPins(); } else skipRedraw = false; }); google.maps.event.addListener(map, "bounds_changed", function() { if (skipRedraw == false) { var bounds = map.getBounds(); lowerBound = bounds.getSouthWest(); upperBound = bounds.getNorthEast(); //loadPins(); pausedUpdate(); } else skipRedraw = false; }); google.maps.event.addListener(map, "infowindowopen", function() { var existingSwBounds = boundToCSV(lowerBound); var existingNeBounds = boundToCSV(upperBound); var bounds = map.getBounds(); var newSwBounds = boundToCSV(bounds.getSouthWest()); var newNeBounds = boundToCSV(bounds.getNorthEast()); if (existingSwBounds != newSwBounds || existingNeBounds != newNeBounds) skipRedraw = true; map.savePosition(); }); } function loadPins() { // Call setStatusLoading function that add a loader animation setStatusLoading(); // Calling our new 'clearMarkers' function which will also clear MarkerClusterer markers clearMarkers(); google.maps.event.addListener(map, 'bounds_changed', function() { var bounds = map.getBounds(); var upperBound = bounds.getNorthEast(); var lowerBound = bounds.getSouthWest(); }); latLongCheck = lowerBound; var url = '../idx/loadMap.php'; var currentZoom = map.getZoom(); param = 'stp=map&cid=14268&lb='+lowerBound+'&ub='+upperBound+'&zoom='+currentZoom+'&maxPer=50&per=100'; param = param+gatherSearch(); var myAjax = new Ajax.Request( url, { method: 'post', parameters: param, onLoading: function(origonalRequest) { if (origonalRequest.responseText.length == 0) { $('IDX-mapOverlay').innerHTML = "

 

"; $('IDX-mapOverlay').style.display = 'block'; } }, onComplete: function(origonalRequest) { if (200 == origonalRequest.status) { var rawData = origonalRequest.responseText.split('|'); if (isNaN(rawData[0]) == false && rawData[0] > 0) { for (var i = 1; i < rawData.length; i++) { var splitData = rawData[i].split(","); var point = new google.maps.LatLng(splitData[1], splitData[2]); //map.addOverlay(createMarker(point, splitData[0], splitData[3], splitData[4], splitData[5])); createMarker(point, splitData[0], splitData[3], splitData[4], splitData[5]); } // Check the 'createMarker' function - we are NOT setting 'map' property for any markers, thus they are not yet added to map. MarkerClusterer will do that for us! // If 'mc' is not an object yet... if ( mc === null ) { // Instantiate MarkerClusterer - show it the main map, tell it to use our set of markers and a set of options that we've defined at the top mc = new MarkerClusterer( map, markers, mcOptions ); // If 'mc' is already a MarkerClusterer... } else { // Just show it a new set of markers mc.addMarkers( markers ); } //$('IDX-mapInfo').innerHTML = rawData[0]+' Listings Found. '; $('IDX-mapInfo').innerHTML = rawData.length-1+' Listings Found. '; if (rawData[0] == maxResults) $('IDX-mapInfo').innerHTML = $('IDX-mapInfo').innerHTML + 'Maximum results reached, zoom in for more properties.'; else { //$('IDX-mapInfo').innerHTML = $('IDX-mapInfo').innerHTML + 'Click a marker for property details.'; $('IDX-mapInfo').innerHTML = $('IDX-mapInfo').innerHTML; } } else { $('IDX-mapInfo').innerHTML = 'No Listings Found'; } } else { $('IDX-mapInfo').innerHTML = 'Error getting information.'; } $('IDX-mapOverlay').style.display = 'none'; }, onSuccess: function () { $('IDX-mapOverlay').style.display = 'none'; }, onFailure: function() { $('IDX-mapOverlay').style.display = 'none'; $('IDX-mapInfo').innerHTML = 'Error getting information.'; } }); $('IDX-lowerbound').value = lowerBound; $('IDX-upperbound').value = upperBound; $('IDX-zoomLevel').value = currentZoom; $('IDX-mapOverlay').style.display = 'none'; } function clearOverlays() { setAllMap(null); } // This function will just update the IDX-mapInfo div with 'loading' message. function setStatusLoading() { $('IDX-mapInfo').innerHTML = 'Loading properties...'; } // Call this to clear all markers from previous request. // Sets 'markers' array to empty array and calls 'clearMarkers' method of MarkerClusterer (if it has been instantiated already) function clearMarkers() { if ( mc !== null ) { mc.clearMarkers(); } setAllMap( null ); markers = []; } function setAllMap(map) { for (var i = 0; i < markers.length; i++) { markers[i].setMap(map); } } function createMarker(point, number, mlsID, listingType, propType) { var marker = new google.maps.Marker({ position: point, icon: "http://maps.google.com/mapfiles/kml/pal3/icon56.png" // Notice how we are not designating any map for this marker. // Markers will be placed on map by MarkerClusterer a bit later }); markers.push(marker); marker.value = number; google.maps.event.addListener(marker, "click", function() { var myHtml = ''; var url = '../idx/loadMap.php'; param = 'cid=14268&listingID='+number+'&mlsID='+mlsID+'&listingType='+listingType+'&propType='+propType; var oldMessage = $('IDX-mapInfo').innerHTML; $('IDX-mapInfo').innerHTML = 'Loading property information. Please wait.'; var propAjax = new Ajax.Request( url, { method: 'post', parameters: param, onComplete: function (origonalRequest) { myHtml = origonalRequest.responseText; var infoWindow = new google.maps.InfoWindow; var latLng = marker.getPosition(); infoWindow.setContent(myHtml); infoWindow.open(map, marker); //marker.openInfoWindowHtml(myHtml); $('IDX-mapInfo').innerHTML = oldMessage; } } ); skipRedraw = true; }); return marker; } function boundToCSV(bound) { regexp = /[\s\(\)]/g; bound = bound+" "; return bound.replace(regexp,""); } var timerID = 0; function pausedUpdate() { if (timerID == 0) { timerID = setTimeout("loadPins()",800); return true; } else { clearTimeout(timerID); timerID = setTimeout("loadPins()",800); return true; } } function fieldExists(fieldToTest) { if (null == fieldToTest) return false; if ("undefined" == typeof(fieldToTest)) return false; return true; }