title: Google Maps and ASP .NET MVC - Center the map at a marker
body: <p>I'm building a page with a Google MAP that has a side bar with dynamically created divs linked to positions of markers in the map.</p>
  
  <p>I'm using ASP.NET MVC with JQuery and Google Maps API v3.</p>
  
  <p>Here is a look of it. </p>
  
  <p><img src="https://i.stack.imgur.com/CT6N9.jpg" alt="MyPage"></p>
  
  <p>This page is loaded in a splash window and is generated dynamically.</p>
  
  <p>In the background page the user types a state or city in an input field and in my controller action I search for all people that are located in that area and return a JSON.
  I get the JSON and populate the map with markers and then I make the list of divs in the side bar.</p>
  
  <p>I'd like to add a function to those divs that when they are clicked the map will center at the marker.</p>
  
  <p>I came up with an idea for this solution which I could not finish. </p>
  
  <p>I added <code>class="clickable"</code> and the attributes "Lat" and "Lng" with the values equal to the ones in the markers they are related to, and I tried to get their click event with JQuery and then set the map center with its Lat and Lng like this:</p>
  
  <pre><code>$(".clickable div").click(function(){
      $('map_canvas').panTo($(this).attr('lat'), $(this).attr('lng'));
  }    
  </code></pre>
  
  <p>I had 2 problems with this approach. 
  - First, I didn't know how to get the map with JQuery.
  I found 2 ways using like <code>$('map_canvas').gMap</code> but it didn't work. Tried a couple more things that I've found here in Stackoverflow but also didn't work.</p>
  
  <p>Second - The JQuery would not catch the event click from the DIVs. 
  I tested on Google Chrome console the JQuery code and It worked but then my code would not trigger the click.
  I tried something like <code>$(".clickable div").click(function(){ alert("test"); }</code> on Google Chrome and it worked, but in my script it did not.</p>
  
  <p>I also tried to add listeners using <code>addDomListener</code> in my code but couldn't get around that either.</p>
  
  <p>Could anyone please give me a light what would be a good way to do this without having to recreate the map when a div is clicked.</p>
  
  <p>I also don't like the idea of adding Lat and Lng attributes to the divs, I don't know if that would work in any browser or if its good practice. I'm just out of solutions to this.</p>
  
  <p>Here is the code I'm using. (I removed some of it to make it shorter and easier to read)</p>
  
  <pre><code>$(document).ready(function () {
  
      //Google Maps API V3 - Prepares the ajaxForm options.
      var options = {
          beforeSubmit: showRequestPesquisaAdvogados,
          success: showResponsePesquisaAdvogados,
          type: 'post',
          resetForm: false
      };
      $('#form-pesquisaAdvogado').ajaxForm(options);
  
      //$(".clickable").click(function () { alert($(this).attr('lat')) });
  });
  
  function showRequestPesquisaAdvogados(formData, jqForm, options) {
      $("#modal-processing-background").show(); //Shows processing splash window
  }
  
  function showResponsePesquisaAdvogados(responseText, statusText, xhr, $form) {
  
      $("#modal-processing-background").hide(); 
      //Hide processing window
  
      loadSplashWindow();
      CreateMap(responseText);
      CreateSideBar(responseText);
      }
  }
  
  function CreateMap(json) {
  
      var mapOptions = {
          center: new google.maps.LatLng(json[0].Endereco.Lat, json[0].Endereco.Lng),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          //  marker:true
      };
  
      var infoWindow = new google.maps.InfoWindow();
  
      var map = new google.maps.Map(document.getElementById("map-result"), mapOptions);
  
      for (i = 0; i &lt; json.length; i++) {
          var data = json[i]
          var myLatlng = new google.maps.LatLng(data.Endereco.Lat, data.Endereco.Lng);
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: data.Endereco.Logradouro
          });
          (function (marker, data) {                                
              // Attaching a click event to the current marker
              google.maps.event.addListener(marker, "click", function (e) {                    
                  //  Prepare the infoWindows content. 
                  var contentString = //my content; 
                  infoWindow.setContent(contentString);
                  infoWindow.open(map, marker);
              });
  
              //here I tried to add the listener to the div.
              google.maps.event.addDomListener($(".clickable")[i], 'click',
              function () {
                  map.panTo(new google.maps.LatLng($(this).attr('lat'),
                       $(this).attr('lng')));
              });
          })(marker, data);
      }
  }
  
  
  function CreateSideBar(json) {
      $(".sideBarConteiner").empty();        
  
      for (i = 0; i &lt; json.length; i++) {
          var contentString = 
              "&lt;div class='clickable' lat='" + data.Endereco.Lat + 
              "' lng='" + data.Endereco.Lng + "' &gt;" +
              //...div's content here
              "&lt;/div&gt;";
          $(".sideBarConteiner").append(contentString);            
      }
  }
  </code></pre>
  
  <p>If you have any suggestions to make the code better or better practices, since I have only 3 months of experience with programming I might be going in the wrong direction without knowing, so please, feel free to change something if you think it'd be a better way.</p>
  
  <p>I know my post is a bit lenghty, I just wanted to make it clear.</p>
  
  <p>Thank you for your support in advance.</p>
  
  <p>Regards,</p>
  
  <p>Cesar.</p>