I'm trying to add multiple markers to Google Maps. I am using .NET MVC 4 and I am passing a ViewModel to the View with an array containing all the coordinates. I want to display all these into Google Maps. The array is named latLngCoordinates in the ViewModel.

@model Project.Web.ViewModels.ParkingViewModel

Code that goes wrong:

for (var i = 0; i < @Model.latLngCoordinates.Length; i++) {
            addMarker(@Model.latLngCoordinates[i]);
}

Error: The name 'i' does not exist in the current context.

This code is working fine:

<script type="text/javascript"
  src="">
</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(51.92479, 4.469833),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

        for (var i = 0; i < @Model.latLngCoordinates.Length; i++) {
            addMarker(51.918769, 4.480616);
        }

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }

    } google.maps.event.addDomListener(window, 'load', initialize);
</script>

If I use:

addMarker(@Model.latLngCoordinates[1])

Or any other value up to 97 it works..

I'm trying to add multiple markers to Google Maps. I am using .NET MVC 4 and I am passing a ViewModel to the View with an array containing all the coordinates. I want to display all these into Google Maps. The array is named latLngCoordinates in the ViewModel.

@model Project.Web.ViewModels.ParkingViewModel

Code that goes wrong:

for (var i = 0; i < @Model.latLngCoordinates.Length; i++) {
            addMarker(@Model.latLngCoordinates[i]);
}

Error: The name 'i' does not exist in the current context.

This code is working fine:

<script type="text/javascript"
  src="http://maps.googleapis./maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(51.92479, 4.469833),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

        for (var i = 0; i < @Model.latLngCoordinates.Length; i++) {
            addMarker(51.918769, 4.480616);
        }

        function addMarker(x, y) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        }

    } google.maps.event.addDomListener(window, 'load', initialize);
</script>

If I use:

addMarker(@Model.latLngCoordinates[1])

Or any other value up to 97 it works..

• javascript
• asp-mvc
• google-maps

• What is the output of console.log(i) if you add that to your for loop in the code that goes wrong? – Dropzilla Commented Jun 19, 2013 at 16:13
• also you may want to try console.log(typeof i) to make sure i is a number and not a string. – Dropzilla Commented Jun 19, 2013 at 16:14
• console.log(i) goes from 0 to 97 so that is correct. consolelog(typeof i) is number. – Ronald Meijboom Commented Jun 19, 2013 at 16:23

1 Answer 1

You're messing JavaScript with C#. This is a mon mistake on Razor views.

Your for loop is JavaScript, so i is a variable of JavaScript. Your latLngCoordinates array is from C#, so they don't have direct relations.

@for (var i = 0; i < Model.latLngCoordinates.Length; i++) {
    Html.Raw("addMarker(" + Model.latLngCoordinates[i] + "); ");
}

This make your for statement a C# code. So now, the i has relation with your Model's array. It will print many addMarker function as you got on latLngCoordinates length.