title: C# ASP.NET MVC Project and Google Maps: How to fill JavaScript array with values from C# List<>
body: <p>I have a Class like this:</p>
  
  <pre><code>public class Markers
      {
          public double latitude { get; set; }
          public double longitude { get; set; }
  
          //Constructors and Methods
          //(...)
      }
  </code></pre>
  
  <p>On my Controller I have an ActionResult with a List of Markers and I add latitude and longitude like this</p>
  
  <pre><code> List&lt;Markers&gt; listM = new List&lt;Markers&gt;(); //NOTE: this is outside of my ActionResult, no problem with that.
   //(...)
   listM.Add(new Markers(value[0], value[1])); //NOTE: value[0] is my lat and value[1] is my longitude
   //(...)
  </code></pre>
  
  <p>And at the end i return my list to the View:</p>
  
  <pre><code>return (listM);
  </code></pre>
  
  <p>Now on the View, I need to access the data and fill an array so I can display the markers on my google map. </p>
  
  <p><strong>How to fill the array with markers in position lat, long from my list?</strong></p>
  
  <pre><code>@using ProjectName.Models
  @model List&lt;Markers&gt;
  
  &lt;html&gt;
  &lt;head&gt;...&lt;/head&gt;
  &lt;body&gt;...&lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  
  //How can I add a GoogleMap Marker ?
  var markersArray = [];
  @foreach(var item in Model)
                  {
                        //can't use google.maps.Marker inside this foreach =(
                  }
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>NOTE:</strong> This is how I add a marker on that array with a click on the map.</p>
  
  <pre><code>function addMarker(location) {
                  var marker = new google.maps.Marker({
                      draggable: true,
                      animation: google.maps.Animation.DROP,
                      position: location,
                      title: 'Bomb',
                      map: map,
                      icon: bomb
                  });
                  markersArray.push(marker);
              }
  </code></pre>
  
  <p>Question 2:
  Markers still doesn't show on map after @Leo Solution!</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
              var map;
              var geocoder;
              var markersArray = [];
              var geoMarker;
  
              var bomb = new google.maps.MarkerImage('Content/Images/Pins/bomb.png',           
              new google.maps.Size(32, 37), 
              new google.maps.Point(0, 0), 
              new google.maps.Point(22, 44) 
              );
  
  
  
              function initialize() {
  
  
                  var mapOptions = {
                      center: new google.maps.LatLng(41.287739, -7.738992),
                      zoom: 16,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                  };
  
  
                  map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  
  
                  @foreach(var item in Model)
                  {
                      &lt;text&gt;
                      var locations = google.maps.LatLng('@item.latitude', '@item.longitude', false);
                  addMarker(locations);
                     &lt;/text&gt;
                  }
  
  
  
                  geocoder = new google.maps.Geocoder();
  
                  for (var i = 0; i &lt; markersArray.length; i++) {
                      markersArray[i].setMap(map);
                  }
  
  
                  geoMarker = new GeolocationMarker(map);
                  geoMarker.setCircleOptions({ fillColor: '#808080' });
                  google.maps.event.addListenerOnce(geoMarker, 'position_changed', function () {
                      map.setCenter(this.getPosition());
                      map.fitBounds(this.getBounds());
                  });
                  google.maps.event.addListener(geoMarker, 'geolocation_error', function (e) {
                      alert('There was an error obtaining your position. Message: ' + e.message);
                  });
  
                  geoMarker.setMap(map);
  
                  google.maps.event.addDomListener(window, 'load', initialize);
  
  
                  google.maps.event.addListener(map, 'click', function (event) {
                      addMarker(event.latLng);
                  });
  
  
                  google.maps.event.addListener(map, 'zoom_changed', function () {
  
                      var zoomLevel = map.getZoom();           
                      //map.setCenter(myLatLng);
                      document.getElementById('mapzoom').innerHTML = 'Zoom: ' + zoomLevel;
                  });
  
  
              }
  
  
              function showAddress() {
                  alert("Vai navegar para outro endereço!");
                  var address = document.getElementById('txtAddress').value;
                  geocoder.geocode({ 'address': address }, function (results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                          map.setCenter(results[0].geometry.location);
                          var marker = new google.maps.Marker({
                              map: mp,
                              position: results[0].geometry.location
                          });
                      } else {
                          alert('error: ' + status);
                      }
                  });
  
              }
  
  
              function addMarker(location) {
                  var marker = new google.maps.Marker({
                      draggable: true,
                      animation: google.maps.Animation.DROP,
                      position: location,
                      title: 'Bomba',
                      map: map,
                      icon: bomb
                  });
                  markersArray.push(marker);
              }
  
  
              function setAllMap(map) {
                  for (var i = 0; i &lt; markersArray.length; i++) {
                      markersArray[i].setMap(map);
                  }
              }
  
  
              function clearMarkers() {
                  setAllMap(null);
              }
  
              function showMarkers() {
                  setAllMap(map);
              }
  
  
              function deleteMarkers() {
                  clearMarkers();
                  markersArray = [];
              }
  
  
              function loadScript() {
                  var script = document.createElement('script');
                  script.type = 'text/javascript';
                  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;' +
                      'callback=initialize';
                  document.body.appendChild(script);
              }
  
              window.onload = loadScript;
  
  
              if (!navigator.geolocation) {
                  alert('Your browser does not support geolocation');
              }
  
  
          &lt;/script&gt;
  </code></pre>