I'm trying to display multiple markers from a sql database table to google maps. I've converted the data into XML format ready to be iterated into multiple markers on the map, but this is where i'm receiving issues.
I have already managed to do this once, but when I have tried adding another table of markers on the map im having issues. It's not with having two sets of similar codes the same, just this piece of code is wrong somewhere and I cannot see it anywhere.
What you see below are 2 functions for iterating through and marking them on the map.
the following function works :
downloadUrl("php/setMarkers.php");
but the following doesn't :
downloadUrl("php/sethospMarkers.php");
Both XML documents are getting called in and the response are shown fine in the google console and are both exact the same, so there is no difference. Even when i remove the "setMarkers" function out of the application I cannot get this "hospmarkers" function working. What is wrong with this function? am i just to tired and missing the basics?
One of the errors relating to this issue that chrome is showing is :
Uncaught TypeError: Cannot read property 'documentElement' of null
for the following call
var markers = xml.documentElement.getElementsByTagName("marker");
in the hospital function
function initialize() {
var bournemouth = new google.maps.LatLng(50.86244, -1.24778);
var myOptions = {
center: bournemouth,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow;
downloadUrl("php/setMarkers.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 acronym = markers[i].getAttribute("acronym");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + acronym;
var marker = new google.maps.Marker({
map: map,
position: point,
icon: "img/bus.png"
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
downloadUrl("php/sethospMarkers.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var name = markers[i].getAttribute("name");
var phone = markers[i].getAttribute("phone");
var html = "<b>" + name + "</b> <br/>" + phone;
var marker = new google.maps.Marker({
map: map,
position: point,
icon: "img/hospital-building.png"
});
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);
});
}
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() {}
The below script is the xml converter that I use to prepare the data, as you can see it is very simple. this is for the hospital Markers.
<?php
require("sql_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=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error($connection));
}
// Set the active MySQL database
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
die ('Can\'t use db : ' . mysqli_error($connection));
}
// Select all the rows in the markers table
$query = "SELECT * FROM hospmarkers WHERE 1";
$result = mysqli_query($connection, $query);
if (!$result) {
die('Invalid query: ' . mysqli_error($connection));
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'name="' . $row['name'] . '" ';
echo 'phone="' . $row['phone'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>`
The sethospmarkers response is as follows.
"<markers><marker lat="53.853" lng="-0.411" name="East Riding Community Hospital" phone="01482 886600" /><marker lat="50.807" lng="-0.500" name="Zachary Merton Community Hospital " phone="01903 858100" /><marker lat="51.140" lng="-0.486" name="Musculoskeletal physiotherapy service - Cranleigh Village Hospital" phone="01483 782400" /><marker lat="51.380" lng="-0.406" name="Walton Community Hospital" phone="01932 414205" /><marker lat="51.315" lng="-0.556" name="Woking Community Hospital (Virgin Care)" phone="01483 715911" />
` Am I doing a something silly? or am i having a syntax issue? Thanks in advanced
