Adding Google Map from code behind

Question

From codebehind, I'm adding some controls inside a Panel. One of these controls is a generic div in which I load a Google Map using the JQuery UI Map with a location stored in a database according to some option choosen by the user. That works without any problem. This is my JavaScript function:

function loadLocation(map, latitude, longitude) {
  var location = latitude + ',' + longitude;
  $('div[id=' + map + ']').gmap().bind('init', function (ev, map) {
    $(this).gmap('addMarker', { 'position': location, 'bounds': true }).click(function () { });
    $(this).gmap('option', 'zoom', 4);
    $(this).gmap('option', 'disableDefaultUI', true);
  });
}

Now, when the user changes its choise, I am firstly clearing all the controls inside the mentioned Panel in order to add all of them again, including the div with the map. This is my vb code for that:

Dim divForMap As New HtmlGenericControl("div")
divForMap .Attributes.Add("style", "float: right; width: 300px; height: 150px;")
containerPanel.Controls.Add(divForMap)

Dim script As String = "loadLocation('" & divForMap.ClientID & "', '" & oSubstation.latitude & "', '" & oSubstation.longitude & "');"
script &= "$(document).ready($('#" & containerPanel.ClientID & "').stop().fadeOut(0).fadeIn(100));"
ScriptManager.RegisterStartupScript(Page, Page.GetType, Guid.NewGuid.ToString, script, True)

ps: (oSubstation is an object retrieve from persistent storage)

That's what is happening:

• 1: The user choose an option and the map is shown perfectly, with the mark in the specified location and centered in that location.

• 2: The user change its option and the location is changed but something is going wrong with the render of the map.

• 3: If the user change the browser tab and then return back, the map is now well rendered, but it's not centered in the marked location.

• 4: The user must to manually move the map to find the location.

That is really funny (well, not really) due it's happening in Chrome but works fine in IE. Anybody have a solution, clue, suggestion or magic potion? Thanks in advance.

EDIT: I have also try to change the script inserted from codebehind to this, but still not working (ps. the Chrome's console is not showing any error or warning):

Dim script As String = "$(document).ready(function() { "
script &= "               loadLocation('" & divForMap.ClientID & "', '" & oSubstation.latitude & "', '" & oSubstation.longitude & "');"
script &= "               $('#" & containerPanel.ClientID & "').stop().fadeOut(0).fadeIn(100);"
script &= "             });"
ScriptManager.RegisterStartupScript(Page, Page.GetType, Guid.NewGuid.ToString, script, True)

Answer 1

Ok, now it's working. I had applied the style display: none to the container Panel for do the fadeIn effect. It seems that just deleting this style, all works fine. Thanks again to @Pragnesh Patel and I hope it help somebody.