How to iterate over @Model.ICollection in Java Script function?

Question:

I have a @Model.LoginCoordinates where LoginCoordinates is ICollection<Coordinates>.

The Coordinates class:

public class Coordinates {
    public int Id { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

Inside the view in I have:

<script>
    function f(){
       for (var i = 0, n  = @Model.LoginCoordinates.Count; i < n; i++) {
                    alert(i);//works fine, I just wanted to check if the loop works at all
       }
    }
</script>

It works fine, but instead of that I would like to display all the do:

 <script>
     function f(){
          for (var i = 0, n  = @Model.LoginCoordinates.Count; i < n; i++) {
                  var latitute = @Model.LoginCoordinates[i].Latitude;
                  var longituted = @Model.LoginCoordinates[i].Longitude;
         }
     }
</script>

But I cannot access i element of the LoginCoordinates because it is ICollection. Also I believe foreach is impossible at it is c# object.

Question: how to iterate over ICollection inside JavaScript?

EDIT

This above is SSCCE, the real code is;

  var map;
    function InitializeMap() {
        alert('works');
        var lat = @Model.LoginCoordinates.First().Latitude;
        var lon = @Model.LoginCoordinates.First().Longitude;
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions =
        {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions); //this breaks the script

    }
    window.addEventListener('load', InitializeMap);

This should do it using JsonConvert from newtonsoft.json

<script>
var coordinatesJson='@Html.Raw(JsonConvert.Serialize(Model.LoginCoordinates.ToArray())'

var coordinates=JSON.parse(coordinatesJson);

//you now have coordinates as javascript  object

var map;
function InitializeMap() {
    // could loop over if needed
     for(var coords in coordinates) {
        // do something with coords
     }
</script>

Related:

why i don't get return value javascript

Angular $http and Fusion Tables in IE9

Substring of a file

Converting “i+=n” for-loop to $.each

How to send current page number in Ajax request

Javascript function to validate contents of an array

Get elements containing text from array

Login Signup PopUp

Background-image style with JS not working in ie9

KnockoutJS custom component loader not executing `loadViewModel`

submitting form then showing loading image by javascript

How to use a service with Http request in Angular JS

slideToggle state not working with multiple boxes

want to show and hide text using “this” jquery

Parsing XML array using Jquery

show div only when printing

How To Check Value Of String

Replacing elements in an HTML file with JSON objects

Merge and sum values and put them in an array

Target next instance of an element/div

Insert data in collection at Meteor's startup

Teechart HTML5, line color and thickness

Please can someone help me understand the exec method for regular expressions?

How to send Ctrl+S through SendKeys.Send() method to save a file(save as dialog)

Automatically calling server side class without

Javascript sort array of objects in reverse chronological order

Changing interval time to random?

Create array from another with specific indices

Onclick add html content and remove it by clicking “delete” link

Dynamically resize side-by-side images with different dimensions to the same height

Javascript: Forloop Difference between i++ and (i+1)

Google map infowindow position

Cant submit form

Wordpress log out using URL and redirect to specify page

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

How to find the days b/w two long date values

Not able to access variables in required file

Regex to remove `.` from a sub-string enclosed in square brackets

session value in javascript cannot be set

How can I determine if an object of anonymous type is empty?

Can't call fetch directly in Backbone model listenTo

Click on link next link should be display on same page

Catch concurrency exception in EF6 to change message to be more user friendly

Saving data using promises

Javascript change the souce of all images present inside a string

Get all prices with $ from string into an array in Javascript

Sockets make no sense?

Javscript Replace Text in tags without changing children element HTML and Content

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin

How to get my node.js mocha test running?