Tema: Conflicto con div no muestra todo el mapa
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/04/2013, 12:48
franjgg
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 2 meses
Puntos: 4
Conflicto con div no muestra todo el mapa
Hola amigos vereis,

Tengo un panel que se oculta y se muestra pulsando un bonton funciona bien, dentro del panel tengo un mapa de google maps que tambien funiona el problema es que para que el panel aparezca oculta lleva en el css un display:none;

Entonces al pulsar el boton muestra el panel pero esto hace que elmapa no se veo completo solo un trozo, he probado a quitar el display:none; y se ve pero claro el panel se ve al entrar y debe estar oculto, dejo el codigo para que lo vean:

Código HTML: 
Ver original
  1. <head>
  2.         <link rel="stylesheet" type="text/css" href="agenda.css">
  3.         <title>Insertar nuevo contacto</title>
  4.                 <style>
  5.                 .div_oculto_direcciones_negocio{
  6.  
  7.     display:none;
  8.     display:block;
  9.     overflow:hidden;    
  10.  
  11. }
  12.                 </style>
  13.     <script type="text/javascript" src="C:/xampp/htdocs/dondelocompro/script/jquery_mostrar_panel.js"></script> 
  14.         <script type="text/javascript">
  15.     $(document).ready(function() { 
  16.     // Aquí va el resto del código que solo se ejecutará cuando la página haya cargado.
  17.     }); 
  18.     </script>
  19.  
  20.     <script type="text/javascript">
  21.     $(document).ready(function(){
  22.       $("#boton").click(function(){
  23.         $("#div1").fadeToggle(700);
  24.       });
  25.     });
  26.     </script>
  27.          <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  28.         </script>
  29.             <script type="text/javascript">
  30.             var mapa;
  31.             var marcador;
  32.             var geocoder;            
  33.  
  34.             function inicializar(){    
  35.             geocoder = new google.maps.Geocoder();        
  36.             var myLatlng = new google.maps.LatLng(37.192869,-3.613186);
  37.             var mapOptions = {
  38.                   zoom: 16,
  39.                   center: myLatlng,
  40.                   mapTypeId: google.maps.MapTypeId.ROADMAP
  41.             }
  42.             mapa = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);    
  43.  
  44.             google.maps.event.addListener(mapa, 'click', function (event){
  45.                 creaMarcador(event.latLng)
  46.                 });
  47.  
  48.             }
  49.  
  50.             function creaMarcador(localizacion){                
  51.                 // Crear marcador
  52.                    if (marcador) marcador.setMap(null);                   
  53.                    marcador = new google.maps.Marker({
  54.                    position: localizacion,
  55.                    draggable: true, 
  56.                    map: mapa
  57.                 });
  58.                 mapa.setCenter(localizacion);
  59.                  // Rellenar X e Y
  60.                 document.formulario.latitud.value=localizacion.lat();
  61.                 document.formulario.longitud.value=localizacion.lng();
  62.  
  63.                 // Modificar X e Y al mover
  64.                 google.maps.event.addListener(marcador,'drag',function(event){
  65.                     document.formulario.latitud.value=event.latLng.lat();
  66.                     document.formulario.longitud.value=event.latLng.lng();
  67.                     //mapa.setCenter(localizacion);
  68.                 });
  69.  
  70.             }
  71.  
  72.             function direc(){            
  73.             var dire = document.getElementById("direccion").value;            
  74.               geocoder.geocode( {'address': dire}, function(results, status) {
  75.             if (status == google.maps.GeocoderStatus.OK) {
  76.                   mapa.setCenter(results[0].geometry.location);
  77.                   creaMarcador(results[0].geometry.location);
  78.               }
  79.              else {
  80.                   alert("Geocode was not successful for the following reason: " + status);
  81.             }                
  82.             });
  83.  
  84.             }
  85.             </script>
  86.     </head>
  87.     <body onload="inicializar()">
  88.         <h1>Alta de Contacto:</h1>
  89.                                     <div id="div1" style="    display:none;    overflow:hidden">
  90.         <form action="save.php" method="post" name="formulario">
  91.                 <table>
  92.                 <tr><td>
  93.                 
  94.  
  95.             Dirección: <input type="text" id="direccion" name="direccion" onchange="direc()"/> 
  96.             <!--<input type="button" name="boton" value="Busca" onclick="direc()"/>--><br/><br/>
  97.  
  98.  
  99.  
  100.             <br/><br/>
  101.             <input type="submit" value="Guardar"/>
  102.             <input type="reset" value="Limpiar"/>
  103. </td><td>                       
  104.  
  105.  
  106.             X: <input type="text" name="latitud"/> 
  107.             Y: <input type="text" name="longitud"/><br/><br/>
  108.             <div id="map_canvas" style="width:500px;height:500px">&nbsp;</div>                      
  109.                         
  110. </td></tr>                  </table>                    
  111.         </form>
  112.                 </div>
  113.                     <input id="boton" class="Boton_gris" style="margin:10px 0px 10px 0px;"  type="button" id="boton" name="enviar" value="Añadir dirección nueva"/>
  114.     </body>
  115. </html>


A ver si alguien sabe como sepodria solucionar esto.

Un saludo amigos