Google Map Markers not displaying in MVC

Question

I am trying to render Google map with Latitude and Longitude from my MVC Model by using different examples. Google Map is displaying fine but it is not displaying the markers. I am very new to the Google Maps and feeling completely clueless about it. Can please anyone tell me how I can get the markers?

My MVC view is as follow

    if (Model.WidgetType == "Map")
    {
        <div class="experienceRestrictedText">
                <script src="//maps.google.com/maps/api/js?sensor=false&callback=initialize" type="text/javascript"></script>
                <script type="text/javascript">
                function initialize() {
                        var London = new google.maps.LatLng(@Html.Raw(Json.Encode(Model.UserLatitude)), @Html.Raw(Json.Encode(Model.UserLongitude)));

                        // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
                        var mapOptions = {
                            zoom: 14,
                            center: London,
                            mapTypeId: google.maps.MapTypeId['ROADMAP']
                        };

                        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                        $.get("/Home/GetMapLocations", function(data){
                            $.each(data, function(i, item){
                                var marker = new google.maps.Marker({
                                    'position' : new google.maps.LatLng(item.Latitude, item.Longitude),
                                    'map' : map,
                                    'title': item.EngineerName
                                });
                            });
                        });

                        @*var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.lstMapLocations));
                        $.each(data, function (i, item){
                            var marker = new google.maps.Marker({
                                'position' : new google.maps.LatLng(item.Latitude, item.Longitude),
                                'map' : map,
                                'title': item.EngineerName
                            });
                        });*@
                    }
                </script>
                <div class="map" id="map" style="width:690px; height:400px;"></div>
        </div>
}

MVC Controller is as follow

    public ActionResult GetMapLocations()
    {
        var lstMapLocations = new List<MapLocation>();

        var mapLocationModel1 = new MapLocation
        {
            EngineerName = "Engineer1",
            SiteName = "Site1",
            Latitude = 51.507351,
            Longitude = -0.127758,
            LstDouble = new List<double>()
        };

        var mapLocationModel2 = new MapLocation
        {
            EngineerName = "Engineer2",
            SiteName = "Site2",
            Latitude = 51.481728,
            Longitude = -0.613576,
            LstDouble = new List<double>()
        };

        var mapLocationModel3 = new MapLocation
        {
            EngineerName = "Engineer3",
            SiteName = "Site3",
            Latitude = 51.628611,
            Longitude = -0.748229,
            LstDouble = new List<double>()
        };

        var mapLocationModel4 = new MapLocation
        {
            EngineerName = "Engineer4",
            SiteName = "Site4",
            Latitude = 51.26654,
            Longitude = -1.092396,
            LstDouble = new List<double>()
        };

        lstMapLocations.Add(mapLocationModel1);
        lstMapLocations.Add(mapLocationModel2);
        lstMapLocations.Add(mapLocationModel3);
        lstMapLocations.Add(mapLocationModel4);

        foreach(var item in lstMapLocations)
        {
            item.LstDouble.Add(item.Latitude);
            item.LstDouble.Add(item.Longitude);

            item.LatLong = item.LstDouble.ToArray();
        }

        return Json(lstMapLocations);
    }

Answer 1

I have found a work around to my problem and thought to share it for those who may stumble upon a similar issue. Courtesy stack overflow post particularly the answer posted by Atish Dipongkor. There may well be a better alternative to this problem but this approach has resolve my problem. I have made little change in that answer as Atish has used apostrophes while retrieving data from model which can break the functionality if any of the model field has string data with apostrophe in it. My appended solution with the above dummy data (in my question) is as follow

            <div class="experienceRestrictedText">
            <script src="//maps.google.com/maps/api/js?sensor=false&callback=initialize" type="text/javascript"></script>
            <script type="text/javascript">
                function initialize() {
                    var London = new google.maps.LatLng(@Html.Raw(Json.Encode(Model.UserLatitude)), @Html.Raw(Json.Encode(Model.UserLongitude)));

                    // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
                    var mapOptions = {
                        zoom: 8,
                        center: London,
                        mapTypeId: google.maps.MapTypeId['ROADMAP']
                    };

                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                    @foreach (var item in Model.lstMapLocations)
                    {
                    <text>
                    var markerLatLong = new google.maps.LatLng(@(item.Latitude), @(item.Longitude));
                    var markerTitle = @Html.Raw(Json.Encode(item.EngineerName));                        
                    var markerContentString = @Html.Raw(Json.Encode(item.EngineerName)) + " At " + @Html.Raw(Json.Encode(item.SiteName));

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

                    var marker = new google.maps.Marker({
                        position: markerLatLong,
                        title: markerTitle,
                        map: map,
                        content: markerContentString
                    });

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

                    </text>
                    }
                }
            </script>
            <div class="map" id="map" style="width:690px; height:400px;"></div>
        </div>