title: Problem with asp.net mvc and google maps
body: <p>I'm just getting into asp.net mvc and jquery so this might be a "stupid" question.</p>
  
  <p>I'm developing an mvc application which contains a Google Map.</p>
  
  <p>I've used this blog post as an inspiration </p>
  
  <p><a href="http://mikehadlow.blogspot.com/2008/10/using-google-maps-with-mvc-framework.html" rel="nofollow noreferrer">http://mikehadlow.blogspot.com/2008/10/using-google-maps-with-mvc-framework.html</a></p>
  
  <p>and it's working as expected.</p>
  
  <p>The problem occurs when I want to filter the map data. </p>
  
  <p>The use case is the following:</p>
  
  <ol>
  <li>I have a view with a list of element.</li>
  <li>For each element I have a "Trace" link. </li>
  <li>The link point to a controller actions and has the element id as parameter.</li>
  <li>The controller action returns a view.</li>
  <li>The view has some javascript that calls another controller actions</li>
  <li>The controller action returns my map data as JSON </li>
  <li>The script initializes a Google map and displays the JSON data on the map.</li>
  </ol>
  
  <p>I run into problems at 4. The core of the problem is getting the id of the original element to the action that returns the JSON data.</p>
  
  <p>This is what I have tried.</p>
  
  <p>I've created a parameter class which has a public int id property. The map view is using this class as "View data class"</p>
  
  <p>In the view I have added a hidden input field that get filled with the id value from the data class.</p>
  
  <pre><code>&lt;input type="hidden" id="_lblId" value="&lt;%=Model.Id%&gt;"/&gt;
  </code></pre>
  
  <p>After that I include the javascript files that should load the Map a get map data from the controller.</p>
  
  <p>This is where I run into problems.</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(function() {
  var id = parseInt($("#_lblId").val());
  $.ajaxSetup({ cache: false });
  if (google.maps.BrowserIsCompatible()) {            
      $.getJSON("/Maptest/Element/Tracemap", {id: id},  initialise);
  }
  });
  </code></pre>
  
  <p><strong>Controller Action:</strong></p>
  
  <pre><code>public ActionResult Tracemap(int id)
      {
  
          var map = new Map();
  
          var tracedata = _dataRep.ListSkanningerPaaKomponent(Convert.ToInt32(id));
          map.Name = "trace for element - " +id;
          map.Zoom = 2;
          map.LatLng = new LatLng { Latitude = 0.0, Longitude = 0.0 };
          var cnt = 0;
          foreach (var t in tracedata)
          {
              cnt++;
  
              var trace = new Trace
                              {
                                  Name = "Trace " + cnt,
                                  LatLng = new LatLng {Latitude = (double) t.Lat,                  Longitude = (double) t.Long},
                                  Dato = (DateTime) t.Dato,
                                  Tid = (DateTime) t.Tid,
                                  Person = t.PersonId
              };
              map.Add(trace);
          }
  
          return Json(map);
  
      }
  </code></pre>
  
  <p>If I set a breakpoint in the controller action it never gets called. If I debug the javascript the id value is correct.</p>
  
  <p>Using firebug I get this error: 500 Internal Server Error. And the link it tries to call is this : <a href="http://localhost:63246/Maptest/Element/Tracemap?_=1254848265779&amp;id=18" rel="nofollow noreferrer">http://localhost:63246/Maptest/Element/Tracemap?_=1254848265779&amp;id=18</a></p>
  
  <p>If I change the action parameter to a string. The break point gets hit, but then id is empty.</p>
  
  <p>Any ideas how to solve this? Or other ways to get the element Id to the JSON controller action? </p>