title: JSON data to place markers in Google Maps
body: <p>I am trying to place markers according to coordinates that are placed in JSON, but I think I'm not doing things quiet right. </p>
  
  <pre><code>    public class Stadiums
  {
      public int ID { get; set; }
  
      public string Team { get; set; }
  
      public decimal Latitude { get; set; }
  
      public decimal Longitude { get; set; }
  }
  
  
  public void GetStadiums()
      {
          var con = ConfigurationManager.ConnectionStrings["NFLConnectionString"].ToString();
  
          List&lt;Stadiums&gt; matchingStadiums = new List&lt;Stadiums&gt;();
          using (SqlConnection myConnection = new SqlConnection(con))
          {
  
              string oString = "Select * from Stadiums";
              SqlCommand oCmd = new SqlCommand(oString, myConnection);
              myConnection.Open();
              using (SqlDataReader oReader = oCmd.ExecuteReader())
              {
                  while (oReader.Read())
                  {
                      matchingStadiums.Add(new Stadiums
                      {
                          Team = oReader["Team"].ToString(),
                          ID = Convert.ToInt32(oReader["ID"]),
                          Latitude = Convert.ToDecimal(oReader["Latitude"]),
                          Longitude = Convert.ToDecimal(oReader["Longitude"])
                      });
                  }
  
                  ResultstoJSON(matchingStadiums);
  
                  myConnection.Close();
              }
          }
      }
      public void ResultstoJSON(List&lt;Stadiums&gt; stadiums)
      {
          var jsonSerialiser = new JavaScriptSerializer();
          var json = jsonSerialiser.Serialize(stadiums);
          this.JSONData = json;
      }
  </code></pre>
  
  <p>I have verified that JSONData contains all of the data I'm looking for in JSON format. From here, I don't know how to take the data and place pins in Google Maps.</p>
  
  <pre><code>@{
  Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Simple Map&lt;/title&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
      html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px;
      }
  &lt;/style&gt;
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?     v=3.exp&amp;signed_in=true"&gt;&lt;/script&gt;
  &lt;script&gt;
      var myLatlng = new google.maps.LatLng(37.09024, -95.712891);
  
      function initialize() {
          var mapOptions = {
              zoom: 5,
              center: new google.maps.LatLng(37.09024, -95.712891)
          };
         var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
  
          var marker = new google.maps.Marker({
              position: (myLatlng),
              map: map,
              title: 'Hello World!'
          });
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Link to JSON data: <a href="http://pastebin.com/cJBDi3ti" rel="nofollow">http://pastebin.com/cJBDi3ti</a></p>
  
  <p>Again, to clarify, I am trying to place pins/markers in Google Maps according to the items in the JSON data(that have coordinates).</p>