Cannot load Google Maps Markers from XML variable

Question

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

Have you tried pointing your browser at the dynamically generated XML? Is it valid? From the answer to your previous question, it looks like you want to use: var xml = data, rather than data.responseXML. — geocodezip
– geocodezip, Commented Jan 4, 2013 at 19:38
This doesn't look correct to me: <markers><marker id="" lat="" lng="" /></markers>. Might be valid XML, but will not display markers. Is the actual query returning data? Does your code correctly handle the case when it doesn't? — geocodezip
– geocodezip, Commented Jan 4, 2013 at 21:06
I was confused by it too since my query is written like this if(mysql_num_rows($result) > 0), however you can go here, set the from date to January 3rd and hit Map Search. I now have a new error, however you can see the post results in Firebug. — pufAmuf
– pufAmuf, Commented Jan 4, 2013 at 21:14

Dr.Molle · Accepted Answer · 2013-01-04 20:07:46Z

3

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 .

answered Jan 4, 2013 at 20:07

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

pufAmuf Over a year ago

Thanks, however I think that this will never be solved :D! Here's how I formatted the script now. The error now is Error: Invalid value for property <map>: [object HTMLDivElement] in main.js loaded automatically from google. I will try to find out more about the error myself.

Dr.Molle Over a year ago

The error says that you assign a DIV-element to the map-property of an object (but it must be a google.maps.Map-object). Impossible to help you without seeing the complete scripts

geocodezip Over a year ago

Sounds like IE. Do you declare your google.maps.Map object with the "var" keyword? Does it have the same name as the id of HTML div that contains it? To fix that error, we need to see the definition of the map.

pufAmuf Over a year ago

Sure, you can see the whole script here. The map function starts at the bottom, and the top part is not related to the map.

Dr.Molle Over a year ago

MapSearchxml.php always returns <markers> <marker id="" lat="" lng=""/> </markers>

|

geocodezip · Accepted Answer · 2013-01-04 21:21:40Z

2

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).

answered Jan 4, 2013 at 21:21

geocodezip

162k14 gold badges228 silver badges256 bronze badges

2 Comments

pufAmuf Over a year ago

Wow, I am getting there almost! Do you know why I am getting ReferenceError: infoWindow is not defined error? I thought I had everything and google has no answers.

geocodezip Over a year ago

The error: ReferenceError: infoWindow is not defined usually occurs when the infoWindow variable is not defined (hint: it isn't defined). You need to define it and initialize it somewhere.

Collectives™ on Stack Overflow

Cannot load Google Maps Markers from XML variable

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related