Hi, I am currently working on a website project that involves integrating Google Maps API with MySQL database to retrieve coordinates. The functionality works perfectly in Chrome and Safari browsers, but unfortunately, the markers do not display in Internet Explorer. Any assistance would be greatly appreciated. I referred to the guide provided by Google here. Below is the code snippet I am using. Thank you for your help.
var customIcons = {
sport: {
icon: 'images/markers/sport.png',
},
bar: {
icon: 'images/markers/bar.png',
},
poi: {
icon: 'images/markers/poi.png',
},
skola: {
icon: 'images/markers/skola.png',
},
kino: {
icon: 'images/markers/kino.png',
},
divadlo: {
icon: 'images/markers/divadlo.png',
}
};
function loadMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(49.068299, 17.460907),
zoom: 15,
mapTypeId: 'hybrid'
});
var infoWindow = new google.maps.InfoWindow;
// This may need to be adjusted based on the PHP file used
downloadUrl("querymap.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 description = markers[i].getAttribute("description");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + description;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
animation: google.maps.Animation.DROP,
icon: icon.icon
});
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() {}
Here is the XML output generated by PHP. Could there be an issue with it? Apologies for not providing this earlier.
<?php
require("dbconfig.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;
}
// Connect to MySQL server
$connection=mysql_connect ($dbserver, $dbuser, $dbpassword);
if (!$connection) {
die('Connection error : ' . mysql_error());
}
// Select active MySQL database
$db_selected = mysql_select_db($dbname, $connection);
if (!$db_selected) {
die ('Unable to use db : ' . mysql_error());
}
// Retrieve all rows from the markers table
$query = "SELECT * FROM locations WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Query error: ' . 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 'description="' . parseToXML($row['description']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>