I have been trying to figure out what is wrong with my code for a couple days now, and I can't seem to crack it. I am trying to follow this tutorial

I tried all three of the suggested methods to output the XML from my sql server, and I could only get it to work using echo.

The issue I am having is I keep getting the error

"TypeError: xml is null"

This happens at var markers = xml.documentElement.getElementsByTagName("marker"); in the code posted below.

I have no idea how to continue. Please let me know if there are any questions I can aswer for you all. Here is the webpage where the code is trying to run

Here is the code:

(Header section (edited to pertinent code))

        <!-- Google Maps Scrips -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript"
    <script type="text/javascript">

        //Variables used in maps
        var geocoder;
        var map;
        var markersArray = [];
        var infos = [];

        geocoder = new google.maps.Geocoder();

    function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(47.6, -122.3),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        map = new google.maps.Map(document.getElementById("content_map"),

        var infoWindow = new google.maps.InfoWindow;

        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng, map);

      // loads the xml data from marker database
          downloadUrl("http://wp-content/themes/oxygen-child/phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var type = markers[i].getAttribute("type");
              var description = markers[i].getAttribute("description");
              var point = new google.maps.LatLng(
              var rank = markers[i].getAttribute("rank");
              var html = "<b>" + name + "</b> <br/>" + description;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              bindInfoWindow(marker, map, infoWindow, html);


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

    function doNothing() {}


      function placeMarker(location, map) {
        var marker = new google.maps.Marker({
            position: location, 
            map: map




function parseToXML($htmlStr) 
return $xmlStr; 

// Opens a connection to a mySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());

// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());

// Select all the rows in the markers table
$query = "SELECT * FROM Markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());

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

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo 'description="' . parseToXML($row['description']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'rank="' . $row['rank'] . '" ';

  echo '/>';

// End XML file
echo '</markers>';

  • 3
    You're gonna need to significantly trim down that code segment before you're likely to get much help... – Dan Jan 23 '13 at 1:16
  • 1
    Thanks Dan, sorry I am new to all of this. I guess the problem is I am not sure what is pertinent and what isn't. I will chop it down to what I think is needed. – Kelly Mann Jan 23 '13 at 1:35
  • 2
    Also note, I can't see any WordPress in there anywhere. Have you seen AJAX in Plugins and $wpdb in codex? I suggest you don't roll-your-own XML builder either, just use something proven like XMLWriter or SimpleXML. – webaware Jan 23 '13 at 1:38
  • Thanks so much webaware! I am going to look through the links you posted. I am sure I will get something from there to work. – Kelly Mann Jan 23 '13 at 1:43
  • @KellyMann Or simply update your question with what you got then. – kaiser Jan 23 '13 at 1:55

So I figured out the issue. I wasn't familiar enough with how urls are handled in XMLHttpRequest. I needed to change

downloadUrl("http://wp-content/themes/oxygen-child/phpsqlajax_genxml3.php", function(data) {


downloadUrl("http://www.theworldsflgiht.com/wp-content/themes/oxygen-child/phpsqlajax_genxml3.php", function(data) {

Thanks for the help everyone!


Best Practice for WordPress, it also works when you change your host.

downloadUrl("<?php echo get_template_directory_uri(); ?>/phpsqlajax_genxml3.php", function(data) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.