CS50 Mashup: addMarker clarification

Question

Been struggling with pset8 for a few days now. I've many problems here but I guess the main one is I'm not seeing my markers properly, not to mention that the infoWindow isn't happening... I've some basic problems with this pset as it's hard to understand what's responsible for what, which funcion cooperates with which other function(s) and so on. So this code might seem messy, sorry in advance. Any help towards the right direction would be much appreciated.

My addMarker code:

function addMarker(place) 
{
    var myLatlng = new google.maps.LatLng(42.3770, -71.1256); // Cambridge, Massachussets
    var mapOptions = {
        zoom: 8,
        center: myLatlng
        //mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map:map,
        title:"Location"
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);

    // variable declaration for infoWindow
    var content = '<ul>\n';
    var query = place.place_name; 
    var parameters = {
        geo: query
    };
    $.getJSON("articles", parameters)
    .done(function(data, textStatus, jqXHR) {

        // return data to content
        for (var i = 0; i < data.length; i++)
        {
            content += data[i].title;
        }
        content += '</ul>';
    })
    .fail(function(jqXHR, textStatus, errorThrown) {

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

Answer 1

• You are always setting myLatLang here var myLatlng = new google.maps.LatLng(42.3770, -71.1256); // Cambridge, Massachussets, so all the markers will go "there". The argument place is the result of the SELECT query in the update route in application.py, so you probably want the lat/lang from the place dictionary.

• Instead of doing this:

  var myLatlng = new google.maps.LatLng(42.3770, -71.1256); // Cambridge, Massachussets
  var mapOptions = {
      zoom: 8,
      center: myLatlng
      //mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  

  in the addMarker function, suggest you set your map options in that first function in script.js. options are around line 39.

• There is a (global) markers array declared in script.js. You will likely find that you need to add (append?) each new marker to the array.

• From the spec:

  When a marker is clicked, it should trigger the mashup’s info window to open, anchored at that same marker, the contents of which should be an unordered list of links to article for that article’s location (unless /articles outputs an empty array)

  That generally means you need a "click" listener on each marker that will show the info window (showInfo?) for this marker and the HTML content you just built.