title: Changing content of info window on the fly in Google Map
body: <p>I am using google map v3 API. </p>
  
  <p>I search for some entity then place the marker on the map according to the position. Now each marker has its own info window like name,age,place and one select button. Clicking on the select button selects the user and the button gets disabled and text becomes 'selected' using jQuery. But when I again open that info window its the 'select' button again. Pushing the marker again to get rid of this issue is not an option for me since a user can select multiple users. Can't I change the class of the button on the fly so that I don't have to bother the back end again to place the fresh markers.</p>
  
  <p>I am using Handlebar Templates to generate info window content the marker details that I push to the info window is :</p>
  
  <pre><code>&lt;script id="search-user" type="text/x-handlebars-template"&gt;
  {ldelim}{ldelim}#user{rdelim}{rdelim}
  &lt;table border = '1' align = 'center'&gt;
      &lt;tr&gt;
          &lt;td rowspan='4' align='center'&gt;
              &lt;img id="selected-umpire-image-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                  src='{$userImageKey}' border='1'&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr width='200'&gt;
          &lt;td align='left'&gt;
              &lt;strong&gt;
                  &lt;a href='#' id="selected-umpire-name-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                      title="{ldelim}{ldelim}userName{rdelim}{rdelim}"&gt;
                      {ldelim}{ldelim}truncatedName{rdelim}{rdelim}
                  &lt;/a&gt;
              &lt;/strong&gt;,
              &lt;span id="selected-umpire-city-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                  title="{ldelim}{ldelim}city{rdelim}{rdelim}"&gt;
                  {ldelim}{ldelim}truncatedCity{rdelim}{rdelim}
              &lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td align='left' id="selected-umpire-ageGender-{ldelim}{ldelim}userId{rdelim}{rdelim}"
              attr-gender="{ldelim}{ldelim}gender{rdelim}{rdelim}" attr-age="{ldelim}{ldelim}dateOfBirth{rdelim}{rdelim}"&gt;
              {ldelim}{ldelim}gender{rdelim}{rdelim}, {ldelim}{ldelim}dateOfBirth{rdelim}{rdelim} years
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td align='left' id="selected-umpire-active-{ldelim}{ldelim}userId{rdelim}{rdelim}"&gt;
              Active as {ldelim}{ldelim}activeRolesString{rdelim}{rdelim} .
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;a href='#'&gt;
                  &amp;nbsp;
              &lt;/a&gt;
          &lt;/td&gt;
          &lt;td align='center'&gt;
              &lt;button type="button" id="select-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                  onclick="javascript:createMatch.selectUmpire(this)" rel="0"
              {ldelim}{ldelim}#selected{rdelim}{rdelim}
                   class="approve-button greenhover disabled-button select-entity" disabled=""&gt;
              {ldelim}{ldelim}/selected{rdelim}{rdelim}
              {ldelim}{ldelim}^selected{rdelim}{rdelim}
                  class="approve-button greenhover"&gt;
              {ldelim}{ldelim}/selected{rdelim}{rdelim}
  
                  &lt;span class="bt-text"&gt;
                      {ldelim}{ldelim}#selected{rdelim}{rdelim}
                          Selected
                     {ldelim}{ldelim}/selected{rdelim}{rdelim}
                     {ldelim}{ldelim}^selected{rdelim}{rdelim}
                         Select
                     {ldelim}{ldelim}/selected{rdelim}{rdelim}
                  &lt;/span&gt;
              &lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  {ldelim}{ldelim}/user{rdelim}{rdelim}
  </code></pre>
  
  <p></p>