Multiple map marker issue from database to google map in view ASP.NET MVC

I am having an issue with loading multiple map markers in my view from my database, the issue is that it is only showing the last map marker from the database and I am not sure what the issue is.

ViewModel code:

public int NpoID { get; set; }
public string NpoName { get; set; }
public string VerificationStatus { get; set; }
public double Longitude { get; set; }
public double Latitude { get; set; }

Controller code:

public static List<DonatorUserViewModel> MapMarkerList = new List<DonatorUserViewModel>();

public JsonResult GetMarkers()
{
    //Map marker section
    var DynamicMapMarkers = db.tblNpo.Include(zz => zz.tblVerification);

    DonatorUserViewModel MapMarkers = new DonatorUserViewModel();

    //Set map marker values
    foreach (var item in DynamicMapMarkers)
    {
       MapMarkers.NpoID = item.npo_id;
       MapMarkers.NpoName = item.npo_name;
       MapMarkers.VerificationStatus = item.tblVerification.description;
       MapMarkers.Longitude = Convert.ToDouble(item.longitude);
       MapMarkers.Latitude = Convert.ToDouble(item.latitude);

       MapMarkerList.Add(MapMarkers);
    }

       var json = MapMarkerList;
       return Json(json, JsonRequestBehavior.AllowGet);
    }

View code (Javascript for google maps api):

function myMap() {
    var mapProp = {
        center: new google.maps.LatLng(-25.754549, 28.231448),
        zoom: 11,
        disableDefaultUI: true,
        fullscreenControl: true
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        $.get("@Url.Action("GetMarkers","Donator")", function (json, status) {

            //Global infoWindow object that will be reused by all markers
            var infoWindow = new google.maps.InfoWindow();
            var marker, data;

            //Loop through the json data
            for (var i = 0; i < json.length; i++) {
                data = json[i];
                LatLng = new google.maps.LatLng(data.Latitude, data.Longitude)

                //Creating marker and putting it on the map
                marker = new google.maps.Marker({
                    position: LatLng,
                    map: map,
                    title: data.NpoName
                });

                // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
                (function (marker, data) {
                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.NpoName);
                        infoWindow.open(map, marker);
                    });

                })(marker, data);
            };
};

So for more clarity say for example I had 3 different rows in my database and each row had its own longitude and latitude, my desired result would be that all three rows would mean 3 different map markers on my google map, however what is happening is that only the last row is getting a marker on the map instead of all 3 of them. Any help would be much appreciated.