Sin duda, este toca preguntas anteriores relacionadas con la visualización del mapa durante la inicialización. Sin embargo, el problema aquí es que la visualización del mapa se establece en ninguna después de que el mapa ya se haya inicializado. La última línea de mi viuda.onload establece el mapa para mostrar: ninguno; La inicialización del mapa ya debería haberse completado en ese momento, pero el hecho es que la llamada final está causando el problema.Google Maps JS v3: visualización del mapa: ninguna; después de la inicialización del mapa que causa el mapa dañado
window.onload(); función ...
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(); función ...
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";
}
Si llamo loadUserTable(); al final de window.onload(); Me sale esto ... (munged)
Si no llamo loadUserTable(); al final de window.onload(); Me sale esto ... (correcta)
Dado que el problema se deriva de la visualización de mapas que se establece en ninguno después de los mapas deberían haber inicializado, sería llevar a creer que el mapa de inicialización está sucediendo realmente no sincrónicamente. Entonces, ¿cómo sé cuándo está terminado y es seguro ocultar los mapas div? Y también está la pregunta de por qué el mini_map parece depender de la visibilidad del main_map, en lugar de su propia visibilidad. Obtengo los mismos resultados tanto en Chrome como en Firefox, en Linux.
Cualquier ayuda es ayuda :)
Saltar
ACTUALIZACIÓN: He cambiado la última llamada a setTimeout ("loadUserTable();", 1000); y 1 segundo es suficiente pausa para que las cosas funcionen, ¡pero no es lo que quiero! Dado que @Jobsz verifica que se trata de un problema conocido, voy a recurrir a la inicialización fuera de la pantalla y mover el mapa a su posición cuando sea necesario para visualizarlo, o esconderlo y ponerlo en posición después de un corto tiempo de espera.
SOLUCIÓN: proporcionados por @Guan (respuesta cuadros)
que no querían el mapa visible durante la inicialización. Pero quería que se inicializara y estuviera listo cuando el usuario eligiera esa pestaña.
El mapa div se establece inicialmente por lo tanto ...
id="tab3_content" style="display: block;position: absolute; left: -1000px;"
Eso hace que sea visible, pero fuera de la pantalla hacia la izquierda.
y luego ponga un detector para el evento de inactividad en el mapa de inicialización ...
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";
});
que los incendios de eventos una vez cuando el mapa está inactivo (listo). Oculta el div y lo mueve a su posición en la pantalla.
La función loadUserTable() se llama en el flujo de programa normal y la vida es buena. :)
Sí, la inicialización fuera de pantalla fue algo que originalmente estaba considerando también. ¿Funciona bien para ti? – Atticus