I'm working with the Google Maps API where I upload the locations and descriptions from the server to the map. For this I have 4 files db_connect.php
where I have my function that connects PHP with my MySQL database and db_gmapi
that extends from db_connect.php
, connects to the database, picks up the info in it and saves it in a file XML to which I have called directions.xml
I finally have my index.html
for the part to load the map and show the bookmarks with the locations of the file directions.xml
.
The map loads, the BBDD connects perfectly, the file is generated ... but it does not show the markers because the function downloadUrl (url, callback) in mmi index.html
just requires that the file directions.xml
comes from a "url" file and I'm working on localhost and the file is inside the root folder along with index.html
. Try sticking the path of directions.xml
and file name and it did not work ... How can I resolve?
Code index.html
<!DOCTYPE html >
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var customLabel = {
restaurant: {
label: 'A'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// a continuación el problema
downloadUrl('//directions.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
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() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[MI-API-KEY]&callback=initMap">
</script>