Question

Why I get this error?

Compiler Error Message: CS1061: ‘System.Collections.Generic.IEnumerable’ does not contain a definition for ‘lat’ and no extension method ‘lat’ accepting a first argument of type ‘System.Collections.Generic.IEnumerable’ could be found (are you missing a using directive or an assembly reference?)

.Ado Model

int, lat, lng, contents

Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MapApp.Models;

namespace MapApp.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        mapEntities _db = new mapEntities();

        public ActionResult Index()
        {
            return View(_db.river);
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

View

@model IEnumerable<MapApp.Models.river>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2> Index</h2>
<script type="text/javascript">
@foreach (var item in Model)
{
    <text>
      var markerlatLng = new google.maps.LatLng(@(Model.lat), @(Model.lng));
      var contents = '@(Model.contents)';

      var infowindow = new google.maps.InfoWindow({
          content: contents
      });

      var marker = new google.maps.Marker({
          position: markerlatLng,
          title: contents,
          map: map,
          draggable: false
      });

      google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map, marker);
      });

   </text>
}
</script>

Answer 1

Got it fixed!

Controller

public class HomeController : Controller
{
    mapEntities _db = new mapEntities();

    public ActionResult Index()
    {
        return View(_db.river.ToList());
    }
}

View

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

$(function () {
    var latLng = new google.maps.LatLng(52.379397, 4.889644); // Amsterdam
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 15,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    function addMarker(latitude, longitude, title)
    {
        var markerLatLng = new google.maps.LatLng(latitude, longitude);
        var title = title;

        var marker = new google.maps.Marker({
            position: markerLatLng,
            title: title,
            map: map,
            draggable: false
        });
    };

   @foreach (var item in Model)
   {  
     @:addMarker(@item.latitude, @item.longitude, "@item.title");
   }

}); 

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