ejemplos - navegador compatible con la api de javascript de google maps
Pantalla de Google Maps: ninguna problema (12)
Estoy intentando configurar un mapa de Google que se mostrará cuando se haga clic en un enlace y luego se ocultará cuando se haga clic en otro enlace. Todo funciona bien, excepto cuando muestro el mapa desde la pantalla: ninguno, no se visualiza correctamente.
Leí sobre el uso de google.maps.event.trigger (map, ''resize''); pero no soy lo suficientemente competente con Javascript y JQuery para saber cómo agregarlo.
Este es el código que he estado usando:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = ''blah'';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, ''click'', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == ''block''){
document.getElementById(viewmap).style.display = ''none'';
}else{
document.getElementById(viewmap).style.display = ''block'';
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == ''none''){
document.getElementById(hidemap).style.display = ''block'';
}else{
document.getElementById(hidemap).style.display = ''none'';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1(''viewmap''); toggleDiv2(''hidemap'');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1(''viewmap''); toggleDiv2(''hidemap'');">View map</a>
</div>
</body>
</html>
Cualquier ayuda sería muy apreciada,
Quintin
¡De hecho es mejor usar la técnica de la off-left !
Aquí están mis ediciones:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
}
#hidemap {
position:relative;
width:944px;
float:left;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
.good-bye {
position: absolute !important;
left: -10000px !important;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = ''blah'';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, ''click'', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(hasClass(document.getElementById(viewmap), ''good-bye''))
removeClass(document.getElementById(viewmap), ''good-bye'');
else
addClass(document.getElementById(viewmap), ''good-bye'');
return;
}
function toggleDiv2(hidemap){
if(hasClass(document.getElementById(hidemap), ''good-bye''))
removeClass(document.getElementById(hidemap), ''good-bye'');
else
addClass(document.getElementById(hidemap), ''good-bye'');
return;
}
// http://snipplr.com/view/3561/addclass-removeclass-hasclass/
function hasClass(ele,cls) {
return ele.className.match(new RegExp(''(//s|^)''+cls+''(//s|$)''));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp(''(//s|^)''+cls+''(//s|$)'');
ele.className=ele.className.replace(reg,'' '');
}
}
</script>
</head>
<body>
<div id="viewmap" class="good-bye">
<a href="#" onmousedown="toggleDiv1(''viewmap''); toggleDiv2(''hidemap''); return false;">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1(''viewmap''); toggleDiv2(''hidemap'');">View map</a>
</div>
</body>
</html>
.map_container {display: none;}
$(''.show_hide'').click(function(){
$(''.map_container'').toggle({
complete:function (){
google.maps.event.trigger(map, ''resize'');
},
duration:''slow''
});
})
Bastante simple ... en el momento de inicializar el mapa, todos sus divs externos ya deben ser mostrados.
Inicialice el mapa al final:
setTimeout(function(){
$mapsOuterDiv.slideToggle(700);
setTimeout(function(){
initializeGoogleMap();
},300);
},300);
El problema con el tamaño del mapa es que necesita saber el tamaño del div al que se está renderizando. En este momento estás inicializando un mapa en la carga de documentos cuando tu div está oculto, por lo que el mapa no puede calcular su tamaño correctamente: para resolver este problema, solo tienes que inicializarlo la primera vez que muestres el div (no en carga).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
//your global map object
var map = null;
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = ''blah'';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, ''click'', function() {
infowindow.open(map,marker);
});
}
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == ''block''){
document.getElementById(viewmap).style.display = ''none'';
}else{
document.getElementById(viewmap).style.display = ''block'';
//check if map object exists (it is created by you initialize function), if not initialize it
if (!map) {
initialize();
}
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == ''none''){
document.getElementById(hidemap).style.display = ''block'';
}else{
document.getElementById(hidemap).style.display = ''none'';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1(''viewmap''); toggleDiv2(''hidemap'');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1(''viewmap''); toggleDiv2(''hidemap'');">View map</a>
</div>
</body>
</html>
Este código funciona bien (usando jQuery 1.2.6): Css: #gog-map{position:absolute; visibility:hidden;} #gog-map{position:absolute; visibility:hidden;}
$(document).ready(function() {
$(''a#link'').click(function() {
if ($(''#gog-map'').is('':visible'')){
$(''#gog-map'').slideUp(''slow'');
} else{
$(''#gog-map'').slideDown(''slow'');
$("#gog-map").css(''visibility'',''inherit'');
$("#gog-map").css(''position'',''relative'');
}
return false;
});
});
Este problema también ocurre con las pestañas jquery, en lugar de aplicar "display: none", puedes intentar ocultar el mapa de esta manera:
Agregue los siguientes estilos cuando intente ocultar el mapa, en lugar de usar la pantalla: ninguno
position: absolute;
left: -100%;
También puede agregar transiciones como: transición: izquierda 1s fácil;
Puedes probar con el oyente de eventos de google activándolo después de mostrar el mapa:
<script type="text/javascript">
var map; //I placed here the map variable so other functions can see it.
var latlng = new google.maps.LatLng(-27.999673,153.42855);
// in order to center again the map...
function initialize() {
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = ''blah'';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, ''click'', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == ''block''){
document.getElementById(viewmap).style.display = ''none'';
}else{
document.getElementById(viewmap).style.display = ''block'';
//here is where your map is being displayed again, try here
// to trigger the resize event.
google.maps.event.trigger(map, ''resize'');
map.setCenter(latlng);
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == ''none''){
document.getElementById(hidemap).style.display = ''block'';
}else{
document.getElementById(hidemap).style.display = ''none'';
}
}
</script>
Generalmente google.maps.event.trigger (map, ''resize'') actualizará el mapa y anexará el código cada vez que se muestre, ya que el estado anterior de la pantalla es "none":
document.getElementById(hidemap).style.display = ''block'';
Generally google.maps.event.trigger(map, ''resize'')
Intenté animar mis mapas sin suerte y finalmente se me ocurrió esto:
CSS: establecemos el contenedor del mapa con la position:absolute; y visibility:hidden; porque tiene que tener sus dimensiones normales para representarse correctamente.
JavaScript:
$(document).ready(function()
{
// We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height.
$("#mapBtn").one("click", function()
{
$("#myMap").hide();
$("#myMap").css("visibility", "inherit");
$("#myMap").css("position", "relative");
});
// And now we toggle away nicely
$("#mapBtn").click(function()
{
$("#myMap").slideToggle(400);
});
});
Me encontré con este mismo problema hoy y eventualmente encontré esto en la Referencia oficial V3 de Google Maps JavaScript API :
Los desarrolladores deben activar este evento en el mapa cuando el div cambie de tamaño:
google.maps.event.trigger(map, ''resize'').
Como display:none es equivalente a dejar <div> con tamaño 0, cambiándolo para display:block convierte de hecho en un cambio de tamaño, por lo que es necesario activar el evento de cambio de tamaño del mapa.
Funcionó como un encanto para mí.
ACTUALIZACIÓN 2018-05-22
Con un nuevo lanzamiento de renderizador en la versión 3.32 de Maps JavaScript API, el evento resize ya no forma parte de la clase Map .
La documentación indica
Cuando se cambia el tamaño del mapa, el centro del mapa se repara
El control de pantalla completa ahora conserva el centro.
Ya no es necesario activar el evento de cambio de tamaño manualmente.
fuente: https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize"); no tiene ningún efecto a partir de la versión 3.32
Simplemente inicialice el mapa cuando quiera mostrarlo. Tuve el mismo problema y lo resolví de esta manera.
Eliminar esta línea:
google.maps.event.addDomListener(window, ''load'', initialize);
Y cambie el script toggleDiv esta manera:
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == ''block''){
document.getElementById(viewmap).style.display = ''none'';
}else{
document.getElementById(viewmap).style.display = ''block'';
initialize();
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == ''none''){
document.getElementById(hidemap).style.display = ''block'';
}else{
document.getElementById(hidemap).style.display = ''none'';
}
}
También he encontrado otra solución. Algunas veces necesita llamar a refresh() en el objeto de Google Maps y el mapa se verá obligado a cambiar el tamaño.
// gmaps - instance of particular map ...
gmaps.refresh()
document.getElementById(''map_canvas'').style.display = ''none'';
Esto funcionó bien para mí, no sé si es porque estoy ocultando el lienzo en lugar de contener div ... funciona bien en IE, Firefox y Chrome. Claro que puedes ocultar tu contenedor una vez que el lienzo del mapa está oculto.