2

I have been working on this since yesterday, and I am not sure if I am structuring my program correctly. When I call $.getJSON and simply print out the data it fetches, everything works fine, but I can't incorporate them into my infowindow (the window shows up, but with no content). I am doing this like so:

var infowindow = new google.maps.InfoWindow({
      content: $.getJSON("articles.php", {geo: place.place_name})
        .done(function(data, textStatus, jqXHR) {

            // create an unordered list
            var articles_list = "<ul>";
            // populate bullet points with links -- just try title for now
            for (i = 0; i < data.length; i++)
                articles_list += "<li>" + data[i].title + "</li>";

            articles_list += "</ul>";
        })
        .fail(function(jqXHR, textStatus, errorThrown) {

            // log error to browser's console
            console.log(errorThrown.toString());
        })

    });

Could someone help me figure out what I am doing wrong? My main worry is that I am not putting the $.getJSON statement in the right place. I have also tried creating a separate content variable, populating it with whatever $.getJSON returns, like so:

var windowContent = <use $.getJSON statement as above>
var infowindow = new google.maps.InfoWindow({
    content: windowContent
});

but this didn't work either.

Any help will be much appreciated :)

2

You are on the right track!

For example, you are definitely not putting the $.getJSON statement in the right place.

But that's easy to fix. Your real problem is with variable scope.

One of the most challenging things about JavaScript is that its variable scope can be confusing.

I Googled and found this explanation:

JavaScript has two scopes – global and local. Any variable declared outside of a function belongs to the global scope, and is therefore accessible from anywhere in your code. Each function has its own scope, and any variable declared within that function is only accessible from that function and any nested functions.

In this case, you're declaring var articles_list inside the local scope of the anonymous callback function called when $.getJSON() returns .done(). That means you can't access this variable anywhere outside of that function. (Not that you actually try to do so, but it wouldn't work anyway!)

To get around this, try declaring these variables outside of the scope for the $.getJSON callback function, and then using them inside of it:

function addMarker(place)
{
    // declare all variables needed anywhere in this function
    // and any nested functions
    var content = '<ul>\n';
    var query = place.place_name; // or concatenate more stuff here
    var parameters = {
        geo: query
    };
    $.getJSON("articles.php", parameters)
    .done(function(data, textStatus, jqXHR) {

        // return data to content
        for (var i = 0; i < data.length; i++)
        {
            content += data[i].title;
            // actually, you'll need to concatenate some HTML around data[i]
            // to make it a list item and a hypertext link
        }
        content += '</ul>';
    })
    .fail(function(jqXHR, textStatus, errorThrown) {

        // log error to browser's console
        console.log(errorThrown.toString());
    });

Later on, you can add a "click" event listener for marker and have it display the content with:

showInfo(marker, content);

Hope this helps!

4
  • 1
    Thank you, that's very helpful! I think I may have completely broken my scripts.js file when working on this, but at least I got my head around the flow of the program :) – iCode95 Sep 12 '16 at 9:13
  • 1
    Also, if I could have one more question...I declared var articles outside of $.getJSON, and then append <li> bullet points to it inside $.getJSON. I tried to document.write(articles), just to check if I am getting what I should. This only works when document.write(articles) is inside $.getJSON (the website just keeps loading indefinitely when I put it outside). Any idea why that is happenning? I thought that making articles global should fix the problem? – iCode95 Sep 12 '16 at 10:43
  • Two things: you didn't make var articles global. It's still locally-scoped to a function, it's just the function outside of the one you had it locally-scoped to before. The linked article will help you to understand. Also, I'm not sure why it keeps loading indefinitely, but it may have something to do with the fact that $.getJSON is a JavaScript promise. Google "javascript promise" for more info about that. – hotwebmatter Sep 12 '16 at 11:19
  • 1
    Alright, thanks a bunch! All is fixed, working and ready to submit now. Last pset down :DDD – iCode95 Sep 12 '16 at 11:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .