Home/ Questions/Q 7746579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T10:18:54+00:00

I started with https://developers.google.com/maps/articles/phpsqlajax_v3 and am using https://developers.google.com/maps/articles/phpsqlsearch_v3 to try to dynamically filter the

  • 0

I started with https://developers.google.com/maps/articles/phpsqlajax_v3 and am using
https://developers.google.com/maps/articles/phpsqlsearch_v3 to try to dynamically filter the content from a mysql DB and update my markers based on the returned results.
My php returns a valid xml file so no worries there. I’m just not sure what I’m doing wrong for the clearing and creating the new markers from the new query.
The load() function gives me a nice new map with markers on it, but the form doesn’t seem to do anything. I even tried just have the form button call clearLocations() and nothing happens. The screen kinda blinks but all the points stay there.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Property Sales</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[


var markersArr = [];
var map;
var infoWindow;

function updateMap(){
var maxbid = document.getElementById('maxbid').value;
var minbid = document.getElementById('minbid').value;
var salestatus = document.getElementById('salestatus').value;
var saledate = document.getElementById('saledate').value;

infoWindow = new google.maps.InfoWindow;

 var queryString = "phpsqlajax_genxml3dynamic.php?maxbid=" + maxbid + "&minbid=" + minbid + "&salestatus=" + salestatus + "&saledate=" + saledate;
//var queryString = "phpsqlajax_genxml3dynamic.php?maxbid=" + maxbid + "&minbid=" + minbid;
queryString="phpsqlajax_genxml3dynamic.php?maxbid=340000&minbid=0&salestatus=*&saledate=*";
downloadUrl( queryString, function(data) {
        var xml = data.responseXML;
         markers = xml.documentElement.getElementsByTagName("marker");
clearLocations();
        for (var i = 0; i < markers.length; i++) {
          var SaleDate = markers[i].getAttribute("SaleDate");
          var CaseNumber = markers[i].getAttribute("CaseNumber");
          var Address = markers[i].getAttribute("Address");
          var ZipCode = markers[i].getAttribute("ZipCode");
          var Plaintiff = markers[i].getAttribute("Plaintiff");
          var Defendant = markers[i].getAttribute("Defendant");
          var Attorney = markers[i].getAttribute("Attorney");
          var SoldTo = markers[i].getAttribute("SoldTo");
          var PID = markers[i].getAttribute("PID");
          var Appraisal = markers[i].getAttribute("Appraisal");
          var MinBid = markers[i].getAttribute("MinBid");
          var SaleAmt = markers[i].getAttribute("SaleAmt");
          var SaleStatus = markers[i].getAttribute("SaleStatus");


          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("Latitude")),
              parseFloat(markers[i].getAttribute("Longitude"))
              );
   var info = "<b>Sale Date:" + SaleDate +"<br/>Address:"+ Address+"<br/>Sale Amount:" + SaleAmt + "</b> <br/>Sale Date:" + SaleDate+ "<br/>Case Number:"+ CaseNumber+ "<br/>Address:"+ Addre\
ss+ "<br/>Zipcode:"+ ZipCode+ "<br/>Plaintiff:"+ Plaintiff+ "<br/>Defendant:"+ Defendant+ "<br/>Attorney:"+ Attorney+ "<br/>Sold to:"+ SoldTo+ "<br/>Parcel ID:"+ PID+ "<br/>Appraisal:"+ Appraisal+\
 "<br/>Minimum bid:"+ MinBid+ "<br/>Sale amount:"+ SaleAmt+ "<br/> Sale status:"+ SaleStatus;

          var icon = customIcons[SaleStatus] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, info);
markersArr.push(marker);
        }
      });

}


    var customIcons = {
      ACTIVE: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      CANCELLED: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      NOBIDNOSALE: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
   },
      SOLD: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };



function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markersArr[i].setMap(null);
     }
     markersArr.length = 0;
}

    function load() {
       map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.7620028,-84.3542049),
        zoom: 10,
        mapTypeId: 'roadmap'
      });
      infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
//      downloadUrl("phpsqlajax_genxml3.php", function(data) {
downloadUrl( "phpsqlajax_genxml3dynamic.php?maxbid=54,000&minbid=0&salestatus=*&saledate=*", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var SaleDate = markers[i].getAttribute("SaleDate");
          var CaseNumber = markers[i].getAttribute("CaseNumber");
          var Address = markers[i].getAttribute("Address");
          var ZipCode = markers[i].getAttribute("ZipCode");
          var Plaintiff = markers[i].getAttribute("Plaintiff");
          var Defendant = markers[i].getAttribute("Defendant");
          var Attorney = markers[i].getAttribute("Attorney");
          var SoldTo = markers[i].getAttribute("SoldTo");
          var PID = markers[i].getAttribute("PID");
          var Appraisal = markers[i].getAttribute("Appraisal");
          var MinBid = markers[i].getAttribute("MinBid");
          var SaleAmt = markers[i].getAttribute("SaleAmt");
          var SaleStatus = markers[i].getAttribute("SaleStatus");


          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("Latitude")),
              parseFloat(markers[i].getAttribute("Longitude")));

 var info = "<b>Sale Date:" + SaleDate +"<br/>Address:"+ Address+"<br/>Sale Amount:" + SaleAmt + "</b> <br/>Sale Date:" + SaleDate+ "<br/>Case Number:"+ CaseNumber+ "<br/>Address:"+ Addre\
ss+ "<br/>Zipcode:"+ ZipCode+ "<br/>Plaintiff:"+ Plaintiff+ "<br/>Defendant:"+ Defendant+ "<br/>Attorney:"+ Attorney+ "<br/>Sold to:"+ SoldTo+ "<br/>Parcel ID:"+ PID+ "<br/>Appraisal:"+ Appraisal+\
 "<br/>Minimum bid:"+ MinBid+ "<br/>Sale amount:"+ SaleAmt+ "<br/> Sale status:"+ SaleStatus;

          var icon = customIcons[SaleStatus] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, info);
markersArr.push(marker);
        }
      });
    }

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

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
  request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>
  </script>
  </head>

 <body onload="load()">
<form name='myForm'>
Min Bid $ :<input type='text' id='minbid' value='1,000' />  and
 $ :<input type='text' id='maxbid' value='1,000,000' />  <br>
Sale Status:<select id='salestatus'>
<option value="*" selected>All</option>
<option>Active</option>
<option>Sold</option>
<option>Cancelled</option>
<option>No Bid, No Sale</option>
</select>
<br>
Sale Date:<select id='saledate'>
<option value="*" selected>All</option>
<option>2012-06-08</option>
<option>2012-06-01</option>
<option>2012-05-25</option>
<option>2012-05-18</option>
<option>2012-05-11</option>
<option>2012-05-04</option>
<option>2012-04-27</option>
<option>2012-04-20</option>
<option>2012-04-13</option>
<option>2012-04-06</option>
<option>2012-03-30</option>
<option>2012-03-23</option>
<option>2012-03-16</option>
<option>2012-03-09</option>
<option>2012-03-02</option>
</select>
<input type='button' onclick='updateMap()' value='Update Map' />
</form>

    <div id="map" style="width: 95%; height: 85%"></div>
  </body>
</html>

Again I’m 99.9% sure the php is fine since it returns valid results which are used to populate the field. I’m befuddled as to what I’ve done wrong for the update.
Hey SO this isn’t spam let me post this dang question.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your clearLocations function is looping over markers not markersArr which contains the existing marker references.

    Should be

    function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markersArr.length; i++) {
       markersArr[i].setMap(null);
     }
     markersArr.length = 0;
}
    • 0