CODEWITHSUNDEEP
c#javascriptasp.netgoogle-mapsupdatepanel
Y2theZ
Y2theZ

Reputation: 10412

Google map not showing after Partial postback

I have a google map in a page (Using the Javascript API v3)

the map is loaded like this:

In the Default.aspx page:

(This is the div where I will load the map)

The scripts I am using:

<script src="http://maps.google.com/maps/api/js?sensor=false&" type="text/javascript </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/MapScript.js"></script>

The MapScript.j file which contains the javascript code for loading the map and all the other thing I need (markers, animations, mouse events...)

In the MapScript.js I load the map with this script

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

The "MapScript.js" contains lots of function that i use in the map.

Untill now everything works fine the map is loaded and all the functions works correctly.

But what I want to do is this:

I put the map in an Update Panel.

In the code behind

at page load the MapPanel is not visible

protected void Page_Load(object sender, EventArgs e)
{
    MapPanel.Visible = false;
}

the on the click of a button I do a partial post back on the update panel and change the visibility of the map to true.

But the problem is that after the partial postback, the map stops showing.

I tried to use RegisterStartupScript to register all 3 of the javascript sources I am using. (I put it in the PageLoad event)

string scr;
scr = "<script src='/Scripts/MapScript.js'></script>";
Page.ClientScript.RegisterStartupScript(Page.GetType(), "key", scr, false);

But it did not work.

Any help is greatly appreciated. Hope I was clear enough.

Thanks a lot

Upvotes: 3

Views: 7954

Answers (1)

Aristos
Aristos

Reputation: 66641

You need to initialize the map after the partial post back of your updatepanel like this.

<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();    
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {      
}

// fires after the partial update of UpdatePanel
function EndRequest(sender, args) {
    LoadMap();
}

var map = null;
function LoadMap()
{
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>

You can also dynamically load the javascript, if you do not won to loaded if not the map displayed using ajax. Here is an example, that I load only one js. Modified it to load them all.

var map = null;
function LoadMap()
{
    LoadScript("http://maps.google.com/maps/api/js?sensor=false&", function() {
                        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
                    }); 
}

function LoadScript(url, callback)
{
    jQuery.ajax({
            type: "GET",
            url: url,
            success: callback,
            dataType: "script",
            cache: true
    });
};

Upvotes: 4

Related Questions