map not loaded on a HTML code received through ajax request

Question

I am building my own personalweb (and my first webpage) and I'm having some troubles trying to display a google map.

First of all, I will try to explain my case. my webpage has four links that load the HTML code of each section inside a div. Because of i dont want to refresh my webpage everytime a link is clicked, That HTML code is recieved through an AJAX request. When a section called 'contact me' is clicked, i call the initialize method to load the map inside a div that has been created in the new HTML code recieved via AJAX. Of course I call initialize after the HTML code is recieved.

Everything seems to work fine, but it only does when I click the link for the first time. When I do, I can see the map; but when I go to another section and then I click again on 'contact me' I see the div but the map is gone:

http://s8.postimg.org/9rllxtxed/map_error.jpg // I dont have enough reputation yet to post images.

This is the initialize function:

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

And this is the function that calls AJAX requests and initialize to display the content in a div called reciever_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);
        } 
    })
   }
}

Do you know why is this happening, or a better way to implement this? I'm a noob, and i dont know if i'm asking too much to ajax requests, css or what.

thanks a lot!

Do you have any error in the javascript console(Te da algún error en la consola de Chrome?También dale un ojo a las peticiones en la ventana Network) — Hackerman, Aug 26 '15 at 19:38
No error in console, and I am not familiarized with the network window on chrome, but i dont see any kind of error or warning. — Ornitier, Aug 26 '15 at 19:44
Is this a live site...can you give me the url(así puedo ver los errores de manera específica, soy de Chile btw ) — Hackerman, Aug 26 '15 at 19:47
De momento no está online ni tengo modo de subirlo a un servidor, trabajo en local : ( — Ornitier, Aug 26 '15 at 19:51
Try https://jsfiddle.net/ (Maquetea tu código ahí, lo guardas y posteas el link, asi podemos reproducir el error). — Hackerman, Aug 26 '15 at 19:55
Lo he estado intentando, pero no logro hacer funcionar las peticiones ajax, me parece que tengo una estructura demasiado compleja para simularla sin tener conocimientos de jsfiddle.net, pero muchas gracias. — Ornitier, Aug 26 '15 at 20:37

score 0 · Answer 1 · answered Aug 26 '15 at 20:18

0

I think your first problem related to the grey google maps image i related to the fact you can't create more the one time the maps. I have the same situation in the past and i have solved checking flag before create the first time the map this way

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

answered Aug 26 '15 at 20:18

ScaisEdge

131,976
10
91
107

I tried, but when i do that and reload the section the div does not appear: s18.postimg.org/5d1bqoukp/map_error2.jpg (well, speaking properly, it is created from zero, because when the section was closed his HTML code was deleted). – Ornitier Aug 26 '15 at 20:35
the section is visible or is hidden. if is hidden try adding ` google.maps.event.trigger(map, 'resize');` after creation. could be "refresh" problem and sometime this solve the problem – ScaisEdge Aug 26 '15 at 20:48
It does not work, I said that the div is deleted, not just hidden, because when I close the 'contact me' section the div gets clean (receiver_div.html('')) so when I click again on 'contact me' section it does not change the css visibility property, instead , it creates it from zero. – Ornitier Aug 26 '15 at 21:05

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Ok, I made my research and the grey map is probably caused by some strange css or execution flow behaviour. I realized that if I opened Chrome's console the map loaded again, and searching info i found this post. I changed the initialize method to execute after a setTimeout of 2 seconds and it works fine. I still dont get why this is not needed for the first time I click the link but it is for the following ones, but it does.

thanks!

map not loaded on a HTML code received through ajax request

2 Answers2