How to get a Google maps SQL->XML->map marker tutorial to work in WordPress

by

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

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

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA-ZWuoso96viUofF_enb79SiN7QwYIh1o&sensor=false">
    </script>
    <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"),
            mapOptions);

        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(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              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);
          request.send(null);
        }   

    function doNothing() {}

    //]]>

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




    </script>`

(phpsqlajax_genxml3.php)

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&apos;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
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)){
  // ADD TO XML DOCUMENT NODE
  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>';

?>
`

2 Answers
2

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

to 

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

Thanks for the help everyone!

Leave a Comment