Foros del Web » Programando para Internet » Javascript »

Conflicto con div no muestra todo el mapa

 Estas en el tema de Conflicto con div no muestra todo el mapa en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/04/2013, 12:48
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 8 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
  #2 (permalink)  
Antiguo 11/04/2013, 13:02
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años, 7 meses
Puntos: 155
Respuesta: Conflicto con div no muestra todo el mapa
...pues me parece que tu problema es que estas inicializando el mapa sobre un div que tiene display:none, prueba quitar inicializar() del body, o sea no ejecutes esta funciona cuando se carga la pagina, sino cuando el panel ya tiene un display:block que seria en...$("#div1").fadeToggle(700); y te quedaria asi..

Código Javascript: 
Ver original
  1. $("#div1").fadeToggle(700, function(){
  2.    inicializar();
  3. });
  #3 (permalink)  
Antiguo 11/04/2013, 13:33
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 8 meses
Puntos: 4
Respuesta: Conflicto con div no muestra todo el mapa
Hola de nuevo ipraetoriux que tal,

He conseguido arreglarlo cambiado el codigo que muestra y oculta el div, solo me falta que cuendo pusemos el link "añadir" este desaparezca, por lo demas esta funcioando.

Pongo el codigo:

Código HTML: 
Ver original
  1. <head>
  2.         <link rel="stylesheet" type="text/css" href="agenda.css">
  3.         <title>Insertar nuevo contacto</title>
  4.  
  5. <script type="text/javascript">
  6. function toggleDivOL( elemID )
  7. {
  8.     var elem = document.getElementById( elemID );
  9.     if( elem.style.position != 'absolute' )
  10.     {
  11.         elem.style.position = 'absolute';
  12.         elem.style.left = '-4000px';
  13.     }
  14.     else
  15.     {
  16.         elem.style.position = 'relative';
  17.         elem.style.left = '0px';
  18.     }
  19. }
  20. </script>
  21. <style type="text/css">
  22. body {
  23.     font-family: Tahoma, sans-serif;
  24. }
  25. .testDiv {
  26.     width: 300px;
  27.     padding: 5px;
  28.     background-color: #DDD000;
  29.     color: #CC0000;
  30.     border: 1px solid #000000;
  31.     font-weight: bold;
  32.  
  33. }
  34. </style>
  35.          <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
  36.         </script>
  37.             <script type="text/javascript">
  38.             var mapa;
  39.             var marcador;
  40.             var geocoder;            
  41.  
  42.             function inicializar(){    
  43.             geocoder = new google.maps.Geocoder();        
  44.             var myLatlng = new google.maps.LatLng(37.192869,-3.613186);
  45.             var mapOptions = {
  46.                   zoom: 16,
  47.                   center: myLatlng,
  48.                   mapTypeId: google.maps.MapTypeId.ROADMAP
  49.             }
  50.             mapa = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);    
  51.  
  52.             google.maps.event.addListener(mapa, 'click', function (event){
  53.                 creaMarcador(event.latLng)
  54.                 });
  55.  
  56.             }
  57.  
  58.             function creaMarcador(localizacion){                
  59.                 // Crear marcador
  60.                    if (marcador) marcador.setMap(null);                   
  61.                    marcador = new google.maps.Marker({
  62.                    position: localizacion,
  63.                    draggable: true, 
  64.                    map: mapa
  65.                 });
  66.                 mapa.setCenter(localizacion);
  67.                  // Rellenar X e Y
  68.                 document.formulario.latitud.value=localizacion.lat();
  69.                 document.formulario.longitud.value=localizacion.lng();
  70.  
  71.                 // Modificar X e Y al mover
  72.                 google.maps.event.addListener(marcador,'drag',function(event){
  73.                     document.formulario.latitud.value=event.latLng.lat();
  74.                     document.formulario.longitud.value=event.latLng.lng();
  75.                     //mapa.setCenter(localizacion);
  76.                 });
  77.  
  78.             }
  79.  
  80.             function direc(){            
  81.             var dire = document.getElementById("direccion").value;            
  82.               geocoder.geocode( {'address': dire}, function(results, status) {
  83.             if (status == google.maps.GeocoderStatus.OK) {
  84.                   mapa.setCenter(results[0].geometry.location);
  85.                   creaMarcador(results[0].geometry.location);
  86.               }
  87.              else {
  88.                   alert("Geocode was not successful for the following reason: " + status);
  89.             }                
  90.             });
  91.  
  92.             }
  93.             </script>
  94.     </head>
  95.     <body onload="inicializar();toggleDivOL('toHide');">
  96.         <h1>Alta de Contacto:</h1>
  97. <div id="toHide" class="testDiv" >
  98.         <form action="save.php" method="post" name="formulario">
  99.                 <table>
  100.                 <tr><td>
  101.                 
  102.  
  103.             Dirección: <input type="text" id="direccion" name="direccion" onchange="direc()"/> 
  104.             <!--<input type="button" name="boton" value="Busca" onclick="direc()"/>--><br/><br/>
  105.  
  106.  
  107.  
  108.             <br/><br/>
  109.             <input type="submit" value="Guardar"/>
  110.             <input type="reset" value="Limpiar"/>
  111. </td><td>                       
  112.  
  113.  
  114.             X: <input type="text" name="latitud"/> 
  115.             Y: <input type="text" name="longitud"/><br/><br/>
  116.             <div id="map_canvas" style="width:500px;height:500px">&nbsp;</div>                      
  117.                         
  118. </td></tr>                  </table>                    
  119.         </form>
  120.                 </div>
  121. <a href="javascript:toggleDivOL('toHide');" id="link_boton" title="Hide the DIV">añadir</a>
  122.     </body>
  123. </html>
  124.  
  125.  
  126. un saludo amigo

Etiquetas: conflicto, formulario, funcion, html, input, jquery, js, muestra, php, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:45.