Cannot load Google Maps Markers from XML variable

问题

I've searched all over the place and tried finding other causes of issues to no avail. I have a search form to retrieve xml data, and the data comes back great.

Response Headers

Content-Type text/xml;charset=utf-8 Date Fri, 04 Jan 2013 19:00:52 GMT Server Apache Transfer-Encoding chunked Via 1.1 decfpxy1 (NetCache NetApp/6.0.2)

Response:

<markers><marker id="1" lat="48.153938" lng="17.108459" /></markers>

However my data variable doesn't insert anything into my script that loads the markers and I get this error:

TypeError: xml is undefined [Break On This Error]

var markers = xml.documentElement.getElementsByTagName("marker");

This is the code:

function SendData() {




    var FromDateUnformatted = $('#from').val().split('/');
    var FromDate = FromDateUnformatted[2] + '-' + FromDateUnformatted[0] + '-' + FromDateUnformatted[1] + ' 00:00:00';
    var ToDateUnformatted = $("#to").val().split('/');
    var ToDate = ToDateUnformatted[2] + '-' + ToDateUnformatted[0] + '-' + ToDateUnformatted[1] + ' 23:59:59';
    var MusicStyles = $("#music").val();
    var Locations = $("#locations").val();
    var FromPrice = $("#entrance-price").slider("values", 0);
    var ToPrice = $("#entrance-price").slider("values", 1);
    var IsOutdoors = +$('#IsOutdoors').is(':checked');
    var HasPatio = +$('#HasPatio').is(':checked');


    $.ajax({
        type: "POST",
        url: "MapSearchxml.php",
        data: {
            dataFromDate: FromDate,
            dataToDate: ToDate,
            dataMusicStyles: MusicStyles,
            dataLocations: Locations,
            dataFromPrice: FromPrice,
            dataToPrice: ToPrice,
            dataIsOutdoors: IsOutdoors,
            dataHasPatio: HasPatio
        },
        beforeSend: function (html) { // this happens before actual call
            $("#results").html('Please Wait');
            $("#searchresults").show();
            $(".phpFromDate").html(FromDate);
        },
        success: function (data) {
            //clearOverlays();
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute("id");
                var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));

                var html = "<b>" + point + "</b>hello <br/>";
                var icon = new google.maps.MarkerImage("redmarker.png");

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

                bindInfoWindow(marker, map, infoWindow, html);
            }
        }
    });



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

}

Here is the PHP file itself:

$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}


header("Content-type: text/xml");

echo '<markers>';

while ($row = @mysql_fetch_assoc($result)){
  echo '<marker ';
  echo 'id="' . parseToXML($row['ID']) . '" ';
  echo 'lat="' . parseToXML($row['LAT']) . '" ';
  echo 'lng="' . parseToXML($row['LNG']) . '" ';
  echo '/>';
}

echo '</markers>';

I've used variations of this code to retrieve a static xml php file without any problems, but with this code, I am unable to take the results from this post and insert them into my marker-builder correctly.

I've done tons of research here and on google and I can't seem to find any alternatives anywhere.

Do you know what the issue could be?

Thanks

回答1:

Your "map" variable is local to the onload function, it isn't available in the global context in which the AJAX callback routine runs, so it isn't defined correctly when you use it here:

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

To make it global, do a var map; in the global context (outside any function), then initialize it in your onload function (as you are now, just remove the "var" from in front of it).

回答2:

the first argument provided to the success-callback is not a (jq)XHR-object, it's the data(depending on the request this may be a string, a JSON-string parsed into an object, or a document ) .

None of them will have a property responseXML.

So you may either use the document directly:

var xml = data;

or use the third argument:

success: function (data,status,jqXHR) {
         var xml = jqXHR.responseXML;
         //....
         }

But whatever you do, you better specify the dataType:'xml' for the request, to be sure that the successfully result will be an xml-document .

来源：https://stackoverflow.com/questions/14163297/cannot-load-google-maps-markers-from-xml-variable