Returning google map markers with ajax always null

Question

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.maps.Marker({
        position: latLng,
        map: map
    });

    var x = marker.position;

    $.ajax({
        type: "POST",
        url: '@Url.Action("AddMarker", "Map")', // Map Controller, AddMarker Action
        data: JSON.stringify({ "position": x }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            if (data.done)
                alert("Marker added");
            else
                alert("MARKER FAILED");
        }
    });
    map.panTo(latLng);
}

The server side function using a view model posted below it:

[HttpPost]
public ActionResult AddMarker(LatLngViewModel position)
{            
    if (position != null)
        return Json(true, JsonRequestBehavior.AllowGet);
    else
        return Json(false, JsonRequestBehavior.AllowGet);
}

ViewModel:

public class LatLngViewModel
{
    double latitude { get; set; }
    double longitude { get; set; }
}

I tried using with quotes and without on position, stringifying the result or returning it with toJSON(). Tried stitching the toSend together with various quotes etc. At this point I have no idea what's causing it and I have no other solutions at hand. Appreciate any help on resolving this and sending the bloody coordinates back to bind them to the model somehow.

Answer 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 :

public class LatLngViewModel
{
    public double latitude { get; set; }
    public double longitude { get; set; }
}

Answer 2

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

Simply use :

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