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('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$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>';
?>
`
So I figured out the issue. I wasn’t familiar enough with how urls are handled in XMLHttpRequest. I needed to change
to
Thanks for the help everyone!
Best Practice for WordPress, it also works when you change your host.