Reading text file from external folder via xml path name (Google maps API)

Question

I'm building a webpage based around the Google maps API, per client request. I'm pulling data from a database into xml that is then linked to markers on the map (part of the data for each record is latitude and longitude, which sets the marker). When the user clicks on the marker, they see content relating to that place in a page div (the content is a title, photo, audio file, and transcript of the audio file).

Everything is working except... I can't figure out how to display the transcript, which is a text file. The xml node contains the full pathname, and the folder with the actual file is stored on the server. I know how to do this with php, but can't rename my file with a php extension because the Google Maps API won't allow it (the map disappears).

Here is the relevant part of the code:

downloadUrl("xmlTest.php", function(data) 
  {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("Sound_xcrpt");
    for (var i = 0; i < markers.length; i++) 
    {
      var title = markers[i].getAttribute("se_title");
      var desc = markers[i].getAttribute("se_desc");
      var type = markers[i].getAttribute("se_contrib");
      var ph_title = markers[i].getAttribute("ph_title");
      var ph_web = markers[i].getAttribute("ph_web");
      var ph_thumb = markers[i].getAttribute("ph_thumb");
      var trans_ex = markers[i].getAttribute("trans_xcrpt");        
      var audio = markers[i].getAttribute("se_audio_file");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("se_lat")),
          parseFloat(markers[i].getAttribute("se_lng")));


      var html =   

      '<head>' +
      '<link rel="stylesheet" href="infoStyle.css" type="text/css">' +
      '</head>' +
      '<html>' +
      '<body>' +        
      '<header id="title">' + title + '</header>' + 
      '</section id="desc">' + desc +
      '</section>' +
      '<section id="photo_thumb">' +
      '<img src="'+ph_thumb+'"/>' +
      '</section>' +
      '</body>' +
      '</html>';

      var winHtml = 
      '<head>' +
      '<link rel="stylesheet" href="styleWin2.css">' +
      '</head>' +
      '<body>' +
      '<header id="title2">' + ph_title + '</header>' +
      '<div class="photos">' + 
      '<img src="'+ph_web+'"/>' + 
      '</div>' +
      '<div class="trans">' +trans_ex+  
      '</div>' +
      '<footer id="audio">' +
      '<audio autoplay="autoplay" controls="controls">' + 
      '<source src="'+audio+'">' +
      '</audio>' +
      '</footer>' +
      '</body>';

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker(
      {
        map: map,
        position: point,
        icon: icon.icon,
        animation: google.maps.Animation.DROP,
        shadow: icon.shadow
      });

      bindInfoWindow(marker, map, infoWindow, html);
      contentBox(marker, map, content, winHtml, infoWindow);

    }
  });
}

"trans_ex" holds the path name array. The way the code is set up above, it displays the actual path name in the div, not the content of the text file to which that path name points.

Is there a javascript (or jquery) method to do this? I know it's tricky because I've got a server-side request in here.

Thanks for your help, Cheryl

Oh, I forgot to include something. I saw this code which looked promising: — cdonahue, Aug 19 '11 at 19:40
...and that code is... var txtFile = new XMLHttpRequest(); txtFile.open("GET", "trans_ex", true); txtFile.onreadystatechange = function() { if (txtFile.readyState === 4) { // if (txtFile.status === 200) { allText = txtFile.responseText; lines =txtFile.responseText.split("\n"); } } } txtFile.send(null); — cdonahue, Aug 19 '11 at 19:42
Sorry - new to this - didn't realize you can't format code correctly in a comment. Ignore previous... — cdonahue, Aug 19 '11 at 19:42

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

Are you wanting to display the contents of the text file? The guy at the following URL needed to read the contents of a text file as well. Maybe this will help?

jquery - Read a text file?

edited May 23 '17 at 10:34

Community

1
1

answered Aug 19 '11 at 21:55

CraigW

715
4
5

momo · Accepted Answer · 2011-08-20T01:49:42.737

What you need is to call AJAX to get the transcript from the server and append it to the DIV once the marker is clicked. XMLHttpRequest object in your second comment is the foundation of AJAX and jquery has a very nice abstraction to do that via jQuery.ajax() (http://api.jquery.com/jQuery.ajax/).

It basically hides the complexities in your second comments and let you deal with what you want to do once the response comes in. In your case, you would want the DIV for the transcript to be populated with the response from the transcript.

In fact, jQuery made further abstraction by providing load() function (http://api.jquery.com/load/). You need to call this function upon click event for the marker and providing it with the right path for the transcript

Thanks - you've set me on the right path. There are a few tricky things: I'm getting the text file via an xml path name, and loading it into a div that is located within a variable (winHtml) tied to the markers script. Ill think it through... — cdonahue, Aug 21 '11 at 12:49

Reading text file from external folder via xml path name (Google maps API)

2 Answers2

Linked