Search code examples
c#asp.net-mvc-3razorgoogle-maps-api-2

Error in binding to .ADO Model using Google Maps API


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>

Solution

  • 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>