0

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.

<div id="map"></div>
<script>

    var map,
    points = [];

    @foreach (var a in Model) {
        //Error: The name 'points' does not exist in the current context
                   //Error: ) expected ; expected (at front and end brackets)
        points.push({ lat: @a.Lat, lng: @a.Lon });
    }

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
        //Error: The name 'points' does not exist in the current context
        @foreach (var p in points) {
            var marker = new google.maps.Marker({ position: p });
            //Error: The name 'marker' does not exist in the current context
            //Error: The name 'map' does not exist in the current context
            marker.setMap(map);
        }
    }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"
    async defer></script>

Model

public class Vehicle
{
    [Key]
    public int ID { get; set; }
    public decimal Lon { get; set; }
    public decimal Lat { get; set; }
    public string VehType { get; set; }
    public string Driver { get; set; }
}
Improve this question
7
  • 4
    @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 even exist at that point - its not in scope. Commented Nov 20, 2015 at 0:44
  • 1
    And I have just noticed this is a repeat of your last question. Please delete one or the other Commented Nov 20, 2015 at 0:49
  • So what would the solution be? Commented Nov 20, 2015 at 1:02
  • You just need to assign you Model to a javascript array, for example var points = @Html.Raw(Json.Encode(Model)). The first foreach is not required and the second needs to replace with a javascript loop. Commented Nov 20, 2015 at 1:09
  • If your show your model (and delete the other question) I can add an answer. Commented Nov 20, 2015 at 1:10

2 Answers 2

Reset to default
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);
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

That fixes the top part, but what about the second for loop that places the markers?
That's some progress! I'm not seeing markers still but at least the map is working and I'm not getting any syntax errors.
Actually markers just showed up, thank you for all the help!
Quick question, do you know how I would set the initial coordinates to the first pair in the points array?
You can get the first set of coordinates using var initial = points[0]; but I'm not sure what you mean by "set the initial coordinates"
|
1

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>

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

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

Improve this answer

4 Comments

Again, this is server side code - points does not exist so the same error will occur.
Are you sure? I'm sure wrapping it inside <text> tag will solve your problem. Please take a look at this answer
You correct, it will work despite the multiple error the RazorTemplateEngine reports, and if the values are numbers only (otherwise you have to determine what to quote and what not quote).
@StephenMuecke Razor has always had problems with JS output and many times it's just parser errors but the page will compile just fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.