Pushing values to javascript array returning lots of errors

Question

I\'m tring to fill a javascript array with lat longs that I can use to put markers on a map from my model but it\'s riddled with errors and I\'m not sure why.

Answer 1

@foreach() is razor code. It is evaluated on the server before its sent to the view. points is a client side javascript variable which does not exist at that point - its not in scope. Instead, you can assign your model to a javascript array using @Html.Raw(Json.Encode(Model). Your script would then be

var model = @Html.Raw(Json.Encode(Model)); // ignore the annoying 'syntax error'
points = [];
$.each(model, function (index, item) {
    points.push({ lat: item.Lat, lng: item.Lon})
})
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
    for (var i = 0; i < points.length; i++) {
        var marker = new google.maps.Marker({ position: points[i] });
        marker.setMap(map);
    }
}

Answer 2

Yes, because inside the @foreach loop, it's C# code, not Javascript. And your points is a Javascript variable, so you cannot just place it like that.

To fix this, you have 2 ways:

1. Wrap it within <text> tag:

<text>points.push({ lat: @a.Lat, lng: @a.Lon });</text>

2. In case your Javascript only has one line, you can use @: like this:

@:points.push({ lat: @a.Lat, lng: @a.Lon });