Changing content of info window on the fly in Google Map

Question

I am using google map v3 API.

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.

I am using Handlebar Templates to generate info window content the marker details that I push to the info window is :

<script id="search-user" type="text/x-handlebars-template">
{ldelim}{ldelim}#user{rdelim}{rdelim}
<table border = '1' align = 'center'>
    <tr>
        <td rowspan='4' align='center'>
            <img id="selected-umpire-image-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                src='{$userImageKey}' border='1'>
        </td>
    </tr>
    <tr width='200'>
        <td align='left'>
            <strong>
                <a href='#' id="selected-umpire-name-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                    title="{ldelim}{ldelim}userName{rdelim}{rdelim}">
                    {ldelim}{ldelim}truncatedName{rdelim}{rdelim}
                </a>
            </strong>,
            <span id="selected-umpire-city-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                title="{ldelim}{ldelim}city{rdelim}{rdelim}">
                {ldelim}{ldelim}truncatedCity{rdelim}{rdelim}
            </span>
        </td>
    </tr>
    <tr>
        <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}">
            {ldelim}{ldelim}gender{rdelim}{rdelim}, {ldelim}{ldelim}dateOfBirth{rdelim}{rdelim} years
        </td>
    </tr>
    <tr>
        <td align='left' id="selected-umpire-active-{ldelim}{ldelim}userId{rdelim}{rdelim}">
            Active as {ldelim}{ldelim}activeRolesString{rdelim}{rdelim} .
        </td>
    </tr>
    <tr>
        <td>
            <a href='#'>
                &nbsp;
            </a>
        </td>
        <td align='center'>
            <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="">
            {ldelim}{ldelim}/selected{rdelim}{rdelim}
            {ldelim}{ldelim}^selected{rdelim}{rdelim}
                class="approve-button greenhover">
            {ldelim}{ldelim}/selected{rdelim}{rdelim}

                <span class="bt-text">
                    {ldelim}{ldelim}#selected{rdelim}{rdelim}
                        Selected
                   {ldelim}{ldelim}/selected{rdelim}{rdelim}
                   {ldelim}{ldelim}^selected{rdelim}{rdelim}
                       Select
                   {ldelim}{ldelim}/selected{rdelim}{rdelim}
                </span>
            </button>
        </td>
    </tr>
</table>
{ldelim}{ldelim}/user{rdelim}{rdelim}

Answer 1

In google map for all the infoWindow the content is already binded to the markers, and whenever we open the infoWindow we get the binded content of marker on the infoWindow.

In google maps there is a listener for infoWindow that is domready, it is called each time the infoWindow is displayed. so we will bind the listener as

google.maps.event.addListener(infoWindow, 'domready', function() {
    checkSelect(entityID); // EntityID here is the id of the user
});

so whenver a infoWindow is opened the function checkSelect will be called.

And the checkSelect function will check whether or not the ID passed is present in the hash. If it is present then that user is selected then just make the Select button disabled for the current infoWindow. I have created a dummy example. You can see that at http://jsfiddle.net/prabhat_rai/zpx7qfh5/