I so far have managed to complete the bulk of pset8. However, when compared to the staff's solution, I have more than 10 markers on the map at any one time. Why is this so? Here is my code from script.js. Thanks
function addMarker(place)
{
//gets coordinates of the place
var coordinates = {lat: (place["latitude"]), lng: (place["longitude"])};
//instantiates a marker
var marker = new google.maps.Marker({
position: coordinates,
map: map
})
//get the geo of the place
geo = {geo: place["postal_code"]};
//get the articles associated with the place
$.getJSON(Flask.url_for("articles"), geo)
.done(function(data, textStatus, jqXHR) {
//iterate through the data and get the relevant information
//create element for unordered list
var links = document.createElement('ul');
for (i = 0; i < data.length; i++)
{
//create item element and the link
var item = document.createElement('li');
//create html tag <a>
var a = document.createElement('a');
//create text node
var title = document.createTextNode(data[i].title);
//insert hyperlink into a
a.setAttribute('href', data[i].link)
//append text to a
a.appendChild(title);
//set item's value
item.appendChild(a);
//append item to the list
links.appendChild(item);
}
//add listener for the click event
google.maps.event.addListener(marker, 'click', function() {
showInfo(marker,links.innerHTML);
});
})
.fail(function(jqXHR, textStatus, errorThrown) {
//log error to browser's console
console.log(errorThrown.toString());
//return undefined content to the showInfo function
var content = undefined;
//call show info with no content which will cause the gif to appear
oogle.maps.event.addListener(marker, 'click', function() {
showInfo(marker,content);
});
})
//add marker to the list
markers.push(marker)
}
removeMarker function
function removeMarkers()
{
//removes all markers from app by accessing the markers array
for (var key in markers)
{
markers[key].setMap(null);
markers.splice(key, 1);
}
}