Estoy trabajando con la API de Google Maps donde levanto las ubicaciones y descripciones desde el servidor al mapa. Para ello Tengo 4 archivos db_connect.php
donde tengo mi funcion que conecta PHP con mi base de datos MySQL y db_gmapi
que extiende de db_connect.php
, conecta a la base de datos, levanta la info en esta y la guarda en un archivo XML al que he llamado directions.xml
finalmente tengo mi index.html
para la parte de cargar el mapa y mostrar los marcadores con las ubicaciones del archivo directions.xml
.
El mapa carga, la BBDD conecta perfectamente, el archivo se genera... pero no muestra los marcadores debido que la función downloadUrl(url, callback) en mmi index.html
exige justamente que el archivo directions.xml
provenga de una "url" de archivo y yo estoy trabajando en localhost y el archivo está dentro de la carpeta raíz junto con index.html
. Intente pegando la ruta del directions.xml
y el nombre de archivo y no funcionó... ¿Como puedo resolver?
Código 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>