0

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>

1 respuesta 1

0

Lo resolvi con downloadUrl('http://localhost/carpetaraiz/directions.xml', function(data)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.