Returning Google Map Markers With Ajax Always Null

EDIT: Actual error I'm getting from the network data: 'Invalid JSON primitive: position' Code calling for it: function AddMarkerAndPanTo(latLng, map) { var marker = new google

Solution 1:

You need to pass an object with latitude and longitude properties to match your view model. Like that:

function AddMarkerAndPanTo(latLng, map) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

    $.ajax({
        type: "POST",
        url: '@Url.Action("AddMarker", "Map")', // Map Controller, AddMarker Action
        data: { 
            latitude: latLng.lat(), 
            longitude: latLng.lng() 
        },
        success: function (data) {
            if (data.done)
                alert("Marker added");
            else
                alert("MARKER FAILED");
        }
    });

    map.panTo(latLng);
}

This is the important part that you were missing:

data: { 
    latitude: latLng.lat(), 
    longitude: latLng.lng() 
},

The latLng object that is passed to this function has 2 properties lat and lng which in turn are functions that you need to invoke in order to get the corresponding coordinates as decimal values.

---

UPDATE:

Make sure that your view model properties are public:

publicclassLatLngViewModel
{
    publicdouble latitude { get; set; }
    publicdouble longitude { get; set; }
}

Solution 2:

Don't use JSON.stringify to prepare the post-data.

Simply use :

data: { "position": latLng.toJSON()},