Google Maps and AJAX

OxieK · February 17th, 2016, 12:43 PM

Hi,
I am creating a store locator that displays a large map on page load and searches for stores when a user enters postcode/city, and displays them on a small map.

Next to the small map there is a Listview of the store details, with the Datapager.
When I click the pager buttons, the small map gets reloaded, and I don't want that. I tried using script manager in various places in the code but it seems to prevent the small map (and sometimes the storelist) from displaying. Can anyone help me with this please?

Here is the code (simplified, as there is quite a lot)
Thanks

HTML Code:

<div class="container storelocator">
            <div class="row">
                <div class="col-md-12">
                    <h2>Store locator</h2>
                </div>
                 <div class="col-md-6 storemap">
                        <div class="form-group">
                            <div class="input-group">
                                <asp:TextBox ID="TxBxTownPostcode"
runat="server" CssClass="form-control" placeholder="Enter your town or postcode"></asp:TextBox>
                                <span class="input-group-btn">
                                    <asp:Button ID="storeLocatorBtn" runat="server" CssClass="btn btn-default storeLocatorBtn" Text="Go!" OnClick="storeLocatorBtn_Click1" />

                                </span>
                            </div>
                        </div>
                 
                        <asp:PlaceHolder ID="smallStoreMapPlcHldr" runat="server" Visible="false">   
                           <div id="map-canvas"></div>      
                        </asp:PlaceHolder>
                


                   </div>
                    <asp:PlaceHolder ID="bigStoreMapPlcHldr" runat="server" Visible="true">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                         <div id="map-canvas-big"></div>
                                    </div>
                                </div>
                            </div>
                    </asp:PlaceHolder>

                <asp:PlaceHolder ID="storelistPlcHldr" runat="server" Visible="false">
                  <div class="col-md-6 storelist">
                    <asp:ListView ID="storeList" runat="server" DataKeyNames="id" OnPagePropertiesChanging="storeList_PagePropertiesChanging" OnItemDataBound="storeList_ItemDataBound">
                        <LayoutTemplate>
                            <table id="storeListTbl" cellpadding="2">
                                <tr id="itemPlaceholder" runat="server">
                                    <td></td>
                                </tr>
                            </table>
                           
                            <asp:DataPager runat="server" ID="DataPager1" PageSize="3" PagedControlID="storeList">
                                <Fields>
                    
                                   <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                        ShowNextPageButton="false" />
                                    <asp:NumericPagerField ButtonType="Link" />
                                    <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
                            </Fields>
                            </asp:DataPager>
                        </LayoutTemplate>


                        <ItemTemplate>

                           //Item template here
                        </ItemTemplate>
                    </asp:ListView>
                </div>
            </asp:PlaceHolder>
            </div>
         </div>

Thanks