pset8 addmarker info window

Question

guys this is how far i went in my add marker function i can get the object and every thing is working just the way i want but i have no idea on how to add the info window . any tip on where to start will be helpful

function addMarker(place)
{
    var mylatLng={lat:Number(place.latitude),lng:Number(place.longitude)};
    var marker=new MarkerWithLabel({
        position:mylatLng,
        map:map,
        labelContent:place.place_name+" "+place.admin_name1,
        icon:"https://maps.google.com/mapfiles/kml/pal2/icon31.png",
        labelStyle:{"font-weight":"bold","font-size":"15px","padding-left":"2.5px"}
        });
    marker.setMap(map);
        marker.addListener("click",function(){
            $.ajax({url:"../articles.php",
            type:"GET",
            data:{geo:place.place_name},
            success:function(response){
                if(response.length>0){
                    console.log(response);
                }
                else
                {
                    console.log("slow news day!");
                }},
            error:function(){
                console.log("an error occured");
            }
            });
        });
}

Answer 1

Here's a problem:

    marker.addListener("click",function(){
        $.ajax({url:"../articles.php",
        type:"GET",
        data:{geo:place.place_name},
        success:function(response){
            if(response.length>0){
                console.log(response);
            }
            else
            {
                console.log("slow news day!");
            }},
        error:function(){
            console.log("an error occured");
        }
        });

You have put your $.ajax() inside the click listener's callback function, which means that you won't even load the JSON from articles.php unless someone clicks on the marker.

This is also a problem because JavaScript variables are locally-scoped to the function, which means the AJAX stuff isn't even accessible outside of the callback. Definitely not what you want!

Why not instead try moving the AJAX request outside the click listener?

Declare a variable to store the content of the info window, which will be concatenated out of values from the JSON and some HTML markup. Make sure that you declare that variable at the top of the addMarker() function so that it will be accessible by that function and all of its children:

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);