Code Sample

<asp:UpdatePanel ID="EventsUpdatePanel" runat="server" >
    <ContentTemplate>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

        <div class="widget calendar venue-calendar base-white">
            <div class="calendar-heading">
                <h3>Follow the Truck</h3>
            </div>
        </div>
        <div class="widget calendar venue-calendar base-white ">
            <asp:Panel ID="ResultsMap" runat="server" Visible="false">
                <div style="position:relative;" class="food-truck-map">
                    <div id="map-canvas" style="width:100%;height:30em;"></div>
                    <div class="label" style="position:absolute;left:30%;bottom:1em;height:2em;background-color:#ffffff;padding:1em;"><strong>Truck Locations</strong> Click pin for date.</div>
                </div>
                <script type="text/javascript">

                    function pageLoad(){
                    var markers = [];
                    var currentWindow;



                        var myLatlng = new google.maps.LatLng(32.3617,-86.2792);
                        var mapOptions = {
                            zoom: 6,
                            center: myLatlng,
                            scrollwheel: false
                        }
                        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                        $('#map-canvas').mouseleave(function(){
                            if(currentWindow)
                                currentWindow.close();

                        });
                        google.maps.event.addListener(map, 'mousedown', function() {
                            if(currentWindow)
                                currentWindow.close();

                        } );


                        <cms:CMSRepeater ID="repEventJS" runat="server"
                            DelayedLoading="true"
                            Path="/%"
                            ClassNames="wca.FoodTruckEvent"
                            TransformationName="wca.FoodTruckEvent.GoogleMaps"
                            DataBindByDefault ="false"
                            OrderBy="Date ASC" >
                        </cms:CMSRepeater>

                    }
                </script>
            </asp:Panel>
            <div class="calendar-heading">
                <h3>&nbsp;</h3>
                <asp:Literal ID="Debug" runat="server"></asp:Literal>
                <div class="month-dropdown">
                    <div class="arrow"><span></span></div>
                    <asp:DropDownList ID="Months" runat="server" AutoPostBack="true" CssClass="select-month"></asp:DropDownList>
                </div>
            </div>
            <asp:Panel ID="Results" runat="server" Visible="false">
            <ul>
                <cms:CMSRepeater ID="repEvent" runat="server"
                    DelayedLoading="true"
                    Path="/%"
                    ClassNames="wca.FoodTruckEvent"
                    TransformationName="wca.FoodTruckEvent.eventlistitem"
                    DataBindByDefault ="false"
                    OrderBy="Date ASC" >
                </cms:CMSRepeater>
            </ul>
            </asp:Panel>
            <asp:Panel ID="NoResults" runat="server" Visible="false" CssClass="no-events">
                <p>There are no events scheduled at this time, please select different days, or check back later.</p>
            </asp:Panel>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Months" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>