Problemas con centrado en Google Maps API

Shikamaru_CSK · #1 (**permalink**) 19/07/2012, 13:49

Buenas tardes.
Estoy desesperado con este problema, ya que no encuentro solución y de hecho no puedo verla raíz del problema.
Estoy desarrollando una pagina web para una inmobiliaria, en la cual cada inmueble tiene una vista en pestañas y un dialog de JQuery UI y otra versión entera, ahora mi problema es que con el mapa, en la versión entera si centra perfectamente el punto, pero en cambio en la versión por pestañas pone el marcador en la esquina superior derecha y no centra correctamente.
Lo único que cambia entre las dos representaciones es el ancho del iframe que manda a llamar el plugin con el que muestro los mapas.

Aquí esta como se ve en la vista completa:
http://i49.tinypic.com/290pnjm.jpg

Y aquí esta como se ve en la vista reducida:
http://i45.tinypic.com/29y1e1h.jpg

Como les digo el código que llama el mapa es exactamente igual, nada mas se cambian los parámetros del tamaño.
Mi suposición es que este chocando con UI Tabs o con UI Dialog, pero no lo creo.

Espero alguien me pueda ayudar.
Que tengan buen día.

#2 (**permalink**) 19/07/2012, 15:32

Cita:

Iniciado por Shikamaru_CSK

...
Lo único que cambia entre las dos representaciones es el ancho del iframe que manda a llamar el plugin con el que muestro los mapas.

Como les digo el código que llama el mapa es exactamente igual, nada mas se cambian los parámetros del tamaño.
...

El problema parece extraño.

El centrado de la posición viene dado por las coordenadas que se definen al construir el mapa.

A la vista de las imágenes, podría decir que hay un desplazamiento, salvo que la primera imagen sea reducida del original.

Dices que trabajas con iframe. ¿Puedes trabajar el código que te transporta? ¿Te llega con un tamaño dado y tú lo recortas?

Porque la prueba más sencilla es crear dos mapas en páginas diferentes con las diferencias de estilos e invocando al mismo javascript.

A partir de ahí podrás analizar si realmente hay algún código que interfiera (que sinceramente no lo creo ya que el primer mapa dices que va bien).

Otra prueba que se puede hacer es llamar a un mapa <div id="map_canvas_1"> y al segundo <div id="map_canvas_2"> duplicando y modificando el javascript con las invocaciones a uno y otro mapa.

Shikamaru_CSK · #3 (**permalink**) 19/07/2012, 17:27

Gracias por responder, ya logré solucionarlo, tome una medida desesperada que después llevo a una medida decente.

Parece que si era un problema del las UI Tabs, lo que hice fue al seleccionar la tap correspondiente al mapa, volviera a inicializar el mapa, claro puse una bandera para que sólo lo haga la primera vez que cambia a la pestaña.

Por si te interesa, el iframe que llamo es como un plugin que hice en el cual le mando de parámetros el tamaño del mapa y las coordenadas del punto y es algo así:

Código PHP:

  <? 
    if(isset($_GET["coordenadas"]) && $_GET["coordenadas"] != ""){ 
        $coordenadas = $_GET["coordenadas"]; 
        $zoom = "13"; 
    }else{ 
        $coordenadas = "23.257907,-100.810547"; 
        $zoom = "5"; 
    } 
    $width = (isset($_GET["width"])) ? $_GET["width"] : "600"; 
    $height = (isset($_GET["height"])) ? $_GET["height"] : "300"; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     
    <script src="jquery/jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
    <script type="text/javascript"> 
        var map = null; 
        var marker = null; 
        var myLatlng = null; 
         
          
        function initialize() { 
            myLatlng = new google.maps.LatLng(<?=$coordenadas?>); 
            var myOptions = { 
              zoom: <?=$zoom?>, 
              center: myLatlng, 
              mapTypeId: google.maps.MapTypeId.ROADMAP 
            } 
             map = new google.maps.Map($("#map").get(0), myOptions); 
             marker = new google.maps.Marker({ 
                position: myLatlng, 
                map: map, 
                title: "Ubicaci&oacute;n de la Propiedad" 
            }); 
        } 
        $(document).ready(function() { 
            initialize(); 
        }); 
    </script> 
 
    <title>Seleccionar Coordenadas</title> 
</head> 
<body> 
    <div id="map" valign="top" style="width:<?=$width?>px; height: <?=$height?>px; padding:10px 5px 15px 10px;"></div> 
</body> 
</html>

Pero pues ya logré solucionarlo como te dije, corriendo la función initialize cuando se pasa a esa pestaña.

Aun así, gracias por responder.

Nos estamos leyendo.

#4 (**permalink**) 19/07/2012, 18:02

Está claro que al armar el mapa, se centra en las coordenadas que se le asignan y para la pestaña hay que volver a cargarlo.

Lo curioso es el espacio que te ofrecía sin cargarlo en la pestaña: podría pensarse que las tablas son como cuadros de un crucigrama adosados uno al lado del otro y que solo vemos uno cada vez.

Revisa si al pasar de la pestaña al mapa no te ocurre lo mismo: puede ser que tengas que reiniciarlo nuevamente.

Felicidades por la solución (entiendo que la única).

Shikamaru_CSK · #5 (**permalink**) 20/07/2012, 01:27

Pues de hecho no debería tener que recargarlo, pero por una extraña razón cuando se cargaba dentro de la pestaña lo ponía de la manera que indique, ya después si lo centraba con otra función lo centraba bien, entonces no era algo como que estuviera enmascarado o algo así.
Si probé, ya una vez cargado, ya queda bien, ya al cambia entre pestañas no tengo ningún problema.

Gracias por el interés en tratar de ayudar, no creo que sea la única solución, pero si la que encontré.

Nos estamos leyendo.