Related to ASP.NET MVC 4 Beta

error.txt

Server Error in '/' Application.

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: Expected "}".


Source Error: 


Line 49: }
Line 50: 
Line 51: <div id="map"></div>

Source File: /Views/Home/Index.cshtml    Line: 51 

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.17379

index.cshtml

@{
    ViewBag.Title = "Home Page";
}

@section head { 
    <style type="text/css">
        #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
    <script type="text/javascript">
        var map;
        var infowindow;

        function initialize() {
            var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

            map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: pyrmont,
                zoom: 15
            });

            var request = {
                location: pyrmont,
                radius: 500,
                types: ['store']
            };

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.search(request, callback);
        }

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                //remove the for loop, it won't break
                for (var i = 0; i < results.length; i++) { 
                    createMarker(results[i]);
                }
            }
        }

    </script>
}

<div id="map"></div>

Modifying the code as below makes it work but this is not right:

@{
    ViewBag.Title = "Home Page";
}

@section head { 
    <style type="text/css">
        #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
    <script type="text/javascript">
        var map;
        var infowindow;

        function initialize() {
            var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

            map = new google.maps.Map(document.getElementById('map'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: pyrmont,
                zoom: 15
            });

            var request = {
                location: pyrmont,
                radius: 500,
                types: ['store']
            };

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.search(request, callback);
        }

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                //remove the for loop, it won't break
                for (var i = 0; i < results.length; i++) { 
                    createMarker(results[i]);
                }
            }
        }

    </script>
}}}

<div id="map"></div>

BTW, the same code doesn't break in ASP.NET MVC 3. I am not sure whether this is a known issue or not.