title: ASP.NET MVC4 Razor in Javascript. Google Map not loading
body: <p>I am having some issues with the <code>setMarkers()</code> function and my map is not displayed at all. I presume that I'm doing something wrong with the Razor syntax within the setMarkers function. Could you please suggest a solution?
  As I'm not an expert in this technology, is it normal to mix Razor within Javascript functions or should I follow an alternative better practice, i.e move my script functions within the <code>@section featured</code> scope?
  Thanks in advance</p>
  
  <p>My MarkerModel:</p>
  
  <pre><code>public class MarkerModel
      {
          public string Description { get; set; }
          public double latitude { get; set; }
          public double longitude { get; set; }
          public int zIndex { get; set; }
      }
  </code></pre>
  
  <p>My View:</p>
  
  <pre><code>@model IEnumerable&lt;DAssistant.Web.Models.MarkerModel&gt;
  
  &lt;style type="text/css"&gt;
      #map-canvas
      {
          height: 500px;
      }
  &lt;/style&gt;
  
  @{
      ViewBag.Title = "Map"; 
  }
  
  @section featured {
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  }
  
  &lt;script type="text/javascript" src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:''}]}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      function init() {
          var mapDiv = document.getElementById('map-canvas');
  
          var mapOptions = {
              center: new google.maps.LatLng(-33.890542, 151.274856),
              zoom: 8,
              mapTypeControl: true,
              zoomControl: true,
              scaleControl: true,
              streetViewControl: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
  
          var map = new google.maps.Map(mapDiv, mapOptions);
  
          setMarkers(map);
      }
  
      function setMarkers(map) {
  
          @foreach (var item in Model)
          {
              &lt;text&gt;
              var myLatLng = new google.maps.LatLng(@item.latitude, @item.longitude);
              var marker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  title: @item.Description,
                  zIndex: @item.zIndex
              });
              &lt;/text&gt;
          }
      }
      google.maps.event.addDomListener(window, 'load', init);
  &lt;/script&gt;
  </code></pre>