Tema: Conflicto con div no muestra todo el mapa
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/04/2013, 13:33
franjgg
 
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