Google maps inside an update panel

Question

I have a repeater that outputs javascript for a Google Map

var marker5450635326848240000000 = new google.maps.Marker({
                          position: new google.maps.LatLng(31.2272,-85.4072),
                          map: map,
                          title: '4/10/2014'
                      });

                      markers.push(marker5450635326848240000000);

I have the map plus a pulldown inside an updatepanel. When the user changes the pulldown the updatepanel updates everything, but the pins on the map do not change.

Here is the example: http://prod.windcreekhospitality.bkwld.onyxtek.com/Giving-Back/Good-on-the-Go.aspx

I know it is the update panel because when I take the panel out of the equation it works.

http://windcreekhospitality.com/Giving-Back/Good-on-the-Go

Where is the whole code for the ascx http://pastebin.com/FqX0PndG

This is an ascx control and it is build for use with Kentico CMS. This limits my choices.

Answer 1

I had a similar problem recently trying to integrate a captcha script inside of an UpdatePanel.

Script blocks inside of an UpdatePanel only get recognized by the browser on the initial page load. Due to the way UpdatePanels work, any new script tags won't be injected into the browser correctly for them to actually be executed.

One work-around will be to use the ScriptManager.RegisterStartupScript method to register the script block dynamically from code-behind. The ASP.NET's ajax library will then handle registering the javascript code correctly and calling it to execute.

If you pass an UpdatePanel control as the first paramter to RegisterStartupScript(), the code will be included in the rendering on the first page load, any full postbacks, and every partial postback if that UpdatePanel is being updated.

In code-behind, build the javascript as a string and then pass it to RegisterStartupScript. Example:

protected override void OnPreRender(EventArgs e)
    {
        var s = new StringBuilder();
        s.Append(@"
            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();
        } );");

        // TODO: manually do whatever that cms:CMSRepeater control would be done to generate the additional JS and append it to the StringBuilder.

        ScriptManager.RegisterClientScriptBlock(EventsUpdatePanel, GetType(), "InitMap", s.ToString(), true);

        base.OnPreRender(e);
    }

Better would be to separate out your function that inits the map, move it to be OUTSIDE of the UpdatePanel, and pass it as arguments the data you want it to initialize. Have the code-behind generate JS that is just a call to that function with the data as arguments.

Answer 2

One way our team handle this issueis by adding the following on the Webpart(here your Map) -> Envelope->Content before

<script type="text/javascript">
function MyFunction() {
      ......
}
MyFunction();
Sys.Application.add_load(MyFunction);
</script>

Also , bring the repeater outside the script tag(see your Pastbin code) and call the pageLoad method as described up.