stackoom
  简体   繁体   中英

Google Maps: update markers with mysql query doesn't work

 原文  2012-04-05 02:29:01  2   1    php/ mysql/ google-maps-api-3

Question

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.

1 answers

solution1
 0 ACCPTED  2012-04-05 03:02:29

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;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question MySQL UPDATE Query PHP doesn't work mysql update query doesn't work Sending latlng values to mysql query to update Google Maps Markers via routeboxer Why doesn't my MySQL update query work? Why doesn't my UPDATE query work? MySQL MySQL update doesn't work Changing javascript in google maps doesn't update it? why doesn't this php work with google maps? Update query doesn't work Google Maps closing infoWindow doesn't work
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM