This one , of course, addresses previous issues regarding map display during initialization. However, the problem here is that the map display is set to none after the card should already be initialized. The last line of my widow.onload sets the displayed map: none; Initialization of the card should have been completed by then, but the fact remains, the last call causes a problem.
window.onload (); function...
window.onload = function(){ changeTheme(me); // do it now so current_theme is avaible to switchTabs(); switchTabs("tab3"); // sets map div visible initMaps(); // map initialization. code included. loadFavoritePlaces(); // asynch $getJSON call, adds markers. No matter the condition of map, markers appear in their proper locations. closePopup("images"); closePopup("location"); // sets maps.mini_map display: none; Problems if we loadUserTable() later. Otherwise OK. Odd! closePopup("tweet"); centerDiv(); document.title = '@'+me.screen_name+' - PithyTwits.com'; users[me.id_str] = me; getPage(); // asynch $.getJSON loads tweets. Not an issue. // Append a scroll event handler to tweet_div $("#tweet_div").scroll(function() { var pos = $(this)[0].scrollHeight - $(this).scrollTop(); if(pos != prev_scroll){ // hack to prevent scroll function from firing twice prev_scroll = pos; if (pos == $(this).outerHeight()) { $("#throbber").fadeIn(); getPage(); } } }); loadUserTable(me.id_str); /* loadUserTable(); calls switchTabs("tab1"); which sets map div display: none; if I comment this out the map initialization completes properly, but my 'tab1' doesn't get populated properly. And page doesn't start on 'tab1', which is required. */ // end window.onload() }
initMaps (); function...
function initMaps() { // markers list maps.markers = new Object; // visibility status' maps.markerStatus = new Object; maps.markerStatus['query'] = true; maps.markerStatus['tweet'] = true; maps.markerStatus['favorite'] = true; // define marker images maps.reticleImage = new google.maps.MarkerImage('images/reticle.png', new google.maps.Size(63, 63), new google.maps.Point(0,0), ... Declarations removed to streamline post. ... new google.maps.Point(0,0), new google.maps.Point(1, 13)); maps.markerShape = { type: "poly", coords: [9,22,16,11,16,5,11,1,6,1,2,5,2,11,9,22] } // setup map options var latlng = new google.maps.LatLng(39.520427, -94.770621); var latlng2 = new google.maps.LatLng(46.1912, -122.1944); var myOptions = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID }; var myOptions2 = { zoom: 13, center: latlng2, disableDefaultUI: true, draggable: false, keyboardShortcuts: false, mapTypeControl: false, scrollwheel: false, mapTypeId: google.maps.MapTypeId.HYBRID }; // initialize maps maps.main_map = new google.maps.Map(document.getElementById("map_div"), myOptions); maps.mini_map = new google.maps.Map(document.getElementById("mini_map"), myOptions2); // default map center markers maps.mini_map_marker = new google.maps.Marker({ position: latlng2, map: maps.mini_map, icon: maps.favoriteMarker, shadow: maps.markerShadow, }); maps.reticleMarker = new google.maps.Marker({ position: latlng, map: maps.main_map, shape: reticleShape, icon: maps.reticleImage, }); // event handlers google.maps.event.addListener(maps.main_map, 'zoom_changed', mapZoomed); google.maps.event.addListener(maps.main_map, 'bounds_changed', function(){maps.reticleMarker.setPosition(maps.main_map.getCenter());}); //idle event listener provided by @Guan in the marked answer. google.maps.event.addListenerOnce(maps.main_map, 'idle', function() { var div = document.getElementById("tab3_content"); div.style.display = "none"; div.style.position = "relative"; div.style.left = "0px"; }); // initialize controls var controls = document.getElementById("visibility_controls"); maps.main_map.controls[google.maps.ControlPosition.TOP_CENTER].push(controls); controls.style.display = "inline"; var controls = document.getElementById("control_controls"); maps.main_map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(controls); controls.style.display = "inline"; var controls = document.getElementById("query_controls"); maps.main_map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controls); controls.style.display = "inline"; }
If I call loadUserTable (); at the end of window.onload (); I get it ... (munged)
If I do not call loadUserTable (); at the end of window.onload (); I get it ... (right)
Since the problem is that the map display is set to none after the cards were to be initialized, this would suggest that the card was actually initialized asynchronously. So, how do I know when it is finished, and can I hide the div maps? And also the question arises, why does mini_map seem to depend on the visibility of main_map and not on its own visibility? I get the same results in both Chrome and Firefox, on Linux.
Any help is help :)
Skip
UPDATE: I changed the final call to setTimeout ("loadUserTable ();", 1000); and for 1 second there is enough pause for everything to work, but that’s not what I want! Since @Jobsz verifies that this is a known issue, I am going to resort to initializing the screen and moving the map to the desired position, either to display it if necessary, or hide it and put it in position after a short timeout.
SOLUTION: Provided by @ Guan (verified answer)
I did not want the map to be displayed during initialization. But he wanted it to be initialized and ready when the user selected this tab.
The div map appears first ...
id="tab3_content" style="display: block;position: absolute; left: -1000px;"
This makes it visible, but off the screen to the left.
And then set the listener for an unoccupied event in card initialization ...
google.maps.event.addListenerOnce(maps.main_map, 'idle', function() { var div = document.getElementById("tab3_content"); div.style.display = "none"; div.style.position = "relative"; div.style.left = "0px"; });
This event fires once when the card is inactive (ready). It hides the div and moves it to a position on the screen.
The loadUserTable () function is called in the normal program flow, and life is good. :)