地图未加载到通过 ajax 请求接收的 HTML 代码上答案

【问题标题】：map not loaded on a HTML code received through ajax request地图未加载到通过 ajax 请求接收的 HTML 代码上
【发布时间】：2015-08-26 19:23:15
【问题描述】：

我正在构建自己的个人网站（以及我的第一个网页），但在尝试显示谷歌地图时遇到了一些麻烦。

首先，我将尝试解释我的情况。我的网页有四个链接，用于加载 div 中每个部分的 HTML 代码。因为我不想每次点击链接时都刷新我的网页，所以 HTML 代码是通过 AJAX 请求接收的。单击名为“联系我”的部分时，我调用 initialize 方法将地图加载到一个 div 中，该 div 是在通过 AJAX 接收的新 HTML 代码中创建的。当然，在收到 HTML 代码后，我会调用 initialize。

一切似乎都很好，但只有当我第一次点击链接时才会这样做。当我这样做时，我可以看到地图；但是当我转到另一个部分然后再次单击“联系我”时，我看到了 div，但地图不见了：

http://s8.postimg.org/9rllxtxed/map_error.jpg // 我还没有足够的声望来发布图片。

这是初始化函数：

 function initialize() {
    var target_div = document.getElementById("map"); //This is the ID of the div created on the HTML code recieved through AJAX.
    var mapOptions = {
      center: new google.maps.LatLng(65.6516152,-34.7739923),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(target_div,mapOptions); //*map* is a global variable (one of my many tries to resolve it)
 }

这是调用 AJAX 请求和 initialize 以在名为 reciever_div 的 div 中显示内容的函数：

    function open_section(clicked_link) {
    if (actual_link != null){
        actual_link = clicked_link;
        reciever_div.fadeOut(750,function(){
            reciever_div.html('');
            $.ajax({
               url: 'textos/'+clicked_link+'.txt',
                success: function (recieved_file) {
                    reciever_div.html(recieved_file);
                    if (clicked_link == 'contactme') {
                        initialize();
                    }
                    reciever_div.fadeIn(750);
                }
            });
        });
    }
   else{
    actual_link = clicked_link;
    $.ajax({
        url: 'textos/'+ clicked_link + '.txt',
        success: function(recieved_file){
            reciever_div.html(recieved_file);
             if (clicked_link == 'contactme') {
                console.log(clicked_link);
                initialize();
                    }
            reciever_div.fadeIn(1500);
        } 
    })
   }
}

您知道为什么会发生这种情况，或者有更好的方法来实现吗？我是一个菜鸟，我不知道我是否对 ajax 请求、css 或什么要求太多。

非常感谢！

【问题讨论】：

javascript 控制台是否有任何错误（Te da algún error en la consola de Chrome?También dale un ojo a las peticiones en la ventana Network）
控制台没有错误，我不熟悉chrome上的网络窗口，但我没有看到任何错误或警告。
这是一个实时站点...你能给我网址吗（así puedo ver los errores de manera específica, soy de Chile btw ）
De momento no está online ni tengo modo de subirlo a un servidor, trabajo en local : (
试试jsfiddle.net (Maquetea tu código ahí, lo guardas y posteas el link, asi podemos reproducir el error)。

标签： javascript css ajax google-maps

【解决方案1】：

我认为您的第一个问题与灰色 google 地图图像有关，因为您无法一次性创建更多地图。我过去也有同样的情况，在第一次以这种方式创建地图之前我已经解决了检查标志

function setMapTarget () {
    if (! flagMapTarget){
        flagMapTarget = true;
        ......
       map = new google.maps.Map(document.getElementById('map_prg'), mapPrgOptions);

【讨论】：

我试过了，但是当我这样做并重新加载该部分时，div不会出现：s18.postimg.org/5d1bqoukp/map_error2.jpg（好吧，正确地说，它是从零创建的，因为当该部分关闭时，他的 HTML 代码被删除）。
该部分可见或隐藏。如果隐藏，请在创建后尝试添加 `google.maps.event.trigger(map, 'resize');`。可能是“刷新”问题，有时这可以解决问题
它不起作用，我说 div 被删除，而不仅仅是隐藏，因为当我关闭“联系我”部分时，div 变得干净（receiver_div.html('')）所以当我再次单击“联系我”部分，它不会更改 css 可见性属性，而是从零开始创建它。

【解决方案2】：

好的，我进行了研究，灰色地图可能是由一些奇怪的 css 或执行流行为引起的。我意识到，如果我打开 Chrome 的控制台，地图会再次加载，并搜索我找到this post 的信息。我将初始化方法更改为在 setTimeout 2 秒后执行，它工作正常。我仍然不明白为什么我第一次单击链接时不需要它，但它适用于以下链接，但确实如此。

谢谢！

【讨论】：