Карта Google не отображается после частичной обратной передачи

Question

У меня есть карта Google на странице (с использованием Javascript API v3)

карта загружается следующим образом:

На странице Default.aspx:

(Это div, куда я буду загружать карту)

Используемые мной скрипты:

<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>

Файл MapScript.j, который содержит код javascript для загрузки карты и всеДругое, что мне нужно (маркеры, анимация, события мыши ...)

В MapScript.js Я загружаю карту с помощью этого сценария

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

"MapScript.js "содержит много функций, которые я использую на карте.

До сих пор все работает нормально, карта загружена и все функции работают правильно.

Но я хочу сделать следующее.это:

Я поместил карту в Панель обновления .

В коде

при загрузке страницы MapPanel

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

при нажатии кнопки я делаю частичную публикацию на панели обновления и изменяю видимость карты на tr

Но проблема в том, что после частичной обратной передачи карта перестает отображаться.

Я попытался использовать RegisterStartupScript, чтобы зарегистрировать все 3 источника JavaScript, которые я использую.(Я поместил это в событие PageLoad)

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

Но это не сработало.

Любая помощь очень ценится.Надеюсь, я был достаточно ясен.

Большое спасибо

Answer 1

Вам нужно инициализировать карту после частичной публикации на вашей панели обновлений следующим образом.

<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>

Вы также можете динамически загружать JavaScript, если вы не выиграли, если не загрузили карту, отображаемую с помощьюАякс.Вот пример, который я загружаю только один JS.Изменено, чтобы загрузить их всех.

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
    });
};