Nueva pregunta

Pregunta:

Fecha: 27-12-2018 08:57:22 (En Español)

Botón mostrar - ocultar en Javascript (NO jquery)[No resuelta]

Hola buen día,

Me gustaría de su ayuda con algo que me viene rompiendo la cabeza hace tiempo, deseo hacer un botón en el cual al pulsarlo muestre un mapa de google, ya lo tengo en JQUERY pero lo quieren en JavaScript (algo de que Jquery va a desaparecer y es mejor las llamadas de librería de JavasScript y Jquery es pesado... whtvr)

Este es mi código:

$(document).ready(function(){
    $("#cambia").click(function(){
      $("#texto").attr('src', 'https://www.google.com/maps/embed?pb').toggle();
      });
    });


Y este es mi código del botón en HTML:

<div>
          <ul class="collapsible" data-collapsible="accordion">
            <li>
              <div class="collapsible-header">
                <i class="material-icons">store</i>Tacuba</div>
              <div class="collapsible-body">
                <b><i>
                <i class="material-icons">place</i>Tacuba, Centro Histórico C.P. 98000
                <br><i class="material-icons">phone_in_talk</i><a href="tel:+52">01 </a>
                </i></b><br>
                <a class="waves-effect waves-light btn" id="cambia96" style="border-radius: 5px;"><i class="material-icons left">directions</i>Ver Mapa</a><br><br>
                <iframe style="display:none; border: none;" id="texto96" src="" width="100%" height="300" allowfullscreen></iframe>
              </div>
            </li>
          </ul>
        </div>


No hay nada malo, sirve el código y los tiempos de carga son excelentes y no carga el plugin de Maps hasta que no se de clic al botón...

Alguien me podría ayudar a pasarlo de Jquery a JavaScript porfa, se lo agradecería.


Saludos!
Etiquetas: Geolocalización - HTML - Javascript - JQuery - Maps - Pregunta Votos: 0 - Respuestas: 9 - Vistas: 16 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 27-12-2018 10:44:55 podrías intentar de esta manera:

    
    //Ubicamos el Boton
        var boton = document.getElementById('cambia');
    
        //Preparamos la funcion que ejecutará las acciones o el toggle
        vermapa = function(){
            //Obtenemos el atributo del elemento
            var elemento = document.getElementById('texto');
            //Estraemos el atributo
            var tx = elemento.getAttribute('src');
            if(tx && tx != ""){
                //Si el atributo existe lo eliminamos
                elemento.removeAttribute('src');
            }else{ 					
                //Si el atributo no existe lo agregamos
                elemento.setAttribute('src','https://www.google.com/maps/embed?pb');
            }
         
        }
        
        //Monitoreamos el clic en el boton
        boton.addEventListener('click',vermapa);
    
    
      Votos: 1 - Link respuesta
     
  • Fecha: 27-12-2018 11:08:14 Que tal Carlos,

    Muchas gracias por la ayuda, voy a ingresar el código para hacer pruebas y regreso con comentarios.

    UPDATE: Ya ingresé el código y funciona excelente!!!!

    Tengo otra pregunta, cambié las variables para agregar otro mapa más pero no funciona el boton, yo lo tengo en mi código anterior así, ya que mando a llamar muchas ubicaciones y uso un botón para cada mapa...

    $(document).ready(function(){
        $("#cambia").click(function(){
          $("#texto").attr('src', 'https://www.google.com/maps/').toggle();
          });
        });
      
      $(document).ready(function(){
        $("#cambia2").click(function(){
          $("#texto2").attr('src', 'https://www.google.com/maps/').toggle();
        });
      });
    
      $(document).ready(function(){
        $("#cambia3").click(function(){
          $("#texto3").attr('src', 'https://www.google.com/maps/').toggle();
        });
      });
    





    Saludos!
      Votos: 0 - Link respuesta
     
  • Fecha: 06-01-2019 02:58:56 Hola lalo para utilizar múltiples botones solo javascript puedes usar la función de carlos con estos cambios.
    para seleccionar le boton usa
    document.querySelectorAll(".classbtn")

    agrega ya sea a los botones o crea una matris de mapas que mostrar.
    yo en tu caso utilizaria una matris asi
     <a class="waves-effect waves-light btn" id="cambia96" style="border-radius: 5px;" data="venezuela"><i class="material-icons left">directions</i>Ver Mapa</a><br><br>
    <a class="waves-effect waves-light btn" id="cambia96" style="border-radius: 5px;" data="bolivia"><i class="material-icons left">directions</i>Ver Mapa</a><br><br>
    


    var ruta = {
    'venezuela':'link_del_mapa_de_venezuela',
    'bolivia':'link_del_mapa_de_bolivia'
    }
    


    y en la función ver mapa cambias la ruta por una variable
     vermapa = function(ruta,elemento){....}

    y aqui cambias asi.
    elemento.setAttribute('src',ruta);
    

    El codigo completo seria asi:
    var btn = document.querySelectorAll(".btn");
    var ruta = {
    'venezuela':'link_del_mapa_de_venezuela',
    'bolivia':'link_del_mapa_de_bolivia'
    }
    vermapa = function(ruta,elemento){
             //Estraemos el atributo
            var tx = elemento.getAttribute('src');
            if(tx && tx != ""){
                //Si el atributo existe lo eliminamos
                elemento.removeAttribute('src');
            }else{                     
                //Si el atributo no existe lo agregamos
                elemento.setAttribute('src',ruta);
            }
         return elemento;
        }
    //Recoremos todos los botones
    boton.forEach(function(b){
      //Asignamos un evento a cada boton
       b.addEventListener('click',function(){
       //Obtenemos la ruta de cada boton
         var d = this.getAttribute('data');
       //mostramos el mapa
         vermapa(ruta[d],this);
      });
    })
    

    Espero te sirva suerte.
      Votos: 2 - Link respuesta
     
  • Fecha: 16-01-2019 06:59:09 no es mas facil ponerlo en un div con propiedad hide y con el boton cambiarle la propiedad a block por ejemplo ???   Votos: 0 - Link respuesta
     
  • Fecha: 16-01-2019 07:19:25 Hola Toni Dominguez:

    Gracias por tu respuesta y contesto a tu pregunta y es No, te explico el porque...

    Estoy cargando en un div y dentro un iframe para colocar un mapa de google maps, el problema es que cuando corro la página, también corre el iframe con los datos de localización, hasta este punto no se nota el tiempo de carga pero ahora imagina cargar 100 mapas!!!!

    Tengo el código ej JQuery pero, el problema es que uso toda la librería para hacer una sola cosa, por lo cual pido ayuda en la comunidad para poder resolver este problema que es:

    1. Cargar un iframe desde Javascript
    2. realizar una función en la cual el botón muestre el mapa y al momento de aparecer el mapa cargue la api de maps (no antes, cuando se ingresa)


    Saludos amigo!
      Votos: 0 - Link respuesta
     
  • Fecha: 17-01-2019 05:19:42 que usas del jquery??? podemos abrir la libreria.. buscar esa funcion e insertarla en el head (jquery es una libreria de funciones js !!!!)
    y sino podemos hacer otra cosa... cuando pulses el boton lo primero que haces es crear el html que carga ese iframe tenga el acceso al api con los datos en cuestion... y despues de crear ese html le dices que lo recargue en el iframe...
    primero miremos si podemos aislar la funcion que usas del jquery y sino despues no la inventamos nosotros...
      Votos: 1 - Link respuesta
     
  • Fecha: 17-01-2019 06:07:51 tambien puedes probar lo siguiente:

    
    <iframe id="frame1"></iframe>
    
    <input type="submit" onclick="prueba('https://www.google.com/maps/embed?pb','frame1');" value="VER MAPA"/>
    
    <iframe id="frame2"></iframe>
    
    <input type="submit" onclick="prueba('https://www.google.com/maps/elotromapa','frame2');" value="VER MAPA"/>
    
    
    function prueba(laruta,eliframe){
    
    var ruta=laruta;
    var queframe=eliframe;
    
    var iframe = document.getElementById(queframe);
    
    iframe.setAttribute("src", ruta);
    
    }


    al pulsar el boton pasamos dos parametros... la ruta del mapa y el nombre del iframe donde mostrarlo y la funcion lo coloca en ella

    revisalo que no lo he probado y esta hecho de cabeza y a ojo de buen cubero !!!

    un saludo ...
      Votos: 0 - Link respuesta
     
  • Fecha: 17-01-2019 07:36:36 Excelente amigo Toni,

    Soy una papa en JS y JQuery por lo que apenas me estoy empapando de nuevo ya que llevo algunos años sin programar pero con tu ayuda ya voy quitando las telarañas que tenía.

    Pruebo el código y regreso con comentarios.


    Saludos!!!!!
      Votos: 0 - Link respuesta
     
  • Fecha: 18-01-2019 12:09:36 este te muestra cuatro botones VER MAPA .... al pulsarlo te muestra el mapa y le cambia el valor del boton a OCULTAR MAPA
    al pulsar OCULTAR MAPA te oculta el mapa (cambia ancho y alto del iframe) y cambia el texto del boton a VER MAPA...

    hay dos funciones...

    si lo quieres ver funcionar en plan rapido ve a:

    https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

    en el lado izquierdo borra el texto que hay y copia todo el codigo que te he puesto y dale al boton VERDE RUN

    en el lado derecho ves el resultado...

    un saludo


    
    MADRID
    <br><br>
    <iframe id="frame1" width="0" height="0" frameborder="0" style="border:0" allowfullscreen></iframe>
    <input id="uno" type="submit" onclick="prueba('https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19853.9053528846!2d-3.692438457134686!3d40.41371584817041!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1547848886164','frame1','uno');" value="VER MAPA"/>
    <br><hr>
    
    BARCELONA
    <br><br>
    <iframe id="frame2" width="0" height="0" frameborder="0" style="border:0" allowfullscreen></iframe>
    <input id="dos" type="submit" onclick="prueba('https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1187.632502089205!2d2.1726926658552532!3d41.40348627761885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49816718e30e5%3A0x44b0fb3d4f47660a!2sBarcelona!5e0!3m2!1ses!2ses!4v1547849224972','frame2','dos');" value="VER MAPA"/>
    <br><hr>
    
    VALENCIA
    <br><br>
    <iframe id="frame3" width="0" height="0" frameborder="0" style="border:0" allowfullscreen></iframe>
    <input id="tres" type="submit" onclick="prueba('https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19853.9053528846!2d-3.692438457134686!3d40.41371584817041!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1547848886164','frame3','tres');" value="VER MAPA"/>
    <br><hr>
    
    LEON
    <br><br>
    <iframe id="frame4" width="0" height="0" frameborder="0" style="border:0" allowfullscreen></iframe>
    <input id="cuatro" type="submit" onclick="prueba('https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1187.632502089205!2d2.1726926658552532!3d41.40348627761885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49816718e30e5%3A0x44b0fb3d4f47660a!2sBarcelona!5e0!3m2!1ses!2ses!4v1547849224972','frame4','cuatro');" value="VER MAPA"/>
    
    <script>
    
    function prueba(laruta,eliframe,elboton){
    
    var ruta=laruta;
    var queframe=eliframe;
    var iframe = document.getElementById(queframe);
    var queboton=document.getElementById(elboton);
    
    iframe.setAttribute("src", ruta);
    iframe.setAttribute("width", 200);
    iframe.setAttribute("height", 150);
    
    queboton.setAttribute("value","OCULTAR MAPA");
    queboton.setAttribute("onclick","prueba2('"+laruta+"','"+eliframe+"','"+elboton+"');");
    
    }
    
    function prueba2(laruta,eliframe,elboton){
    
    var ruta=laruta;
    var queframe=eliframe;
    var iframe = document.getElementById(queframe);
    var queboton=document.getElementById(elboton);
    
    iframe.setAttribute("src", ruta);
    iframe.setAttribute("width", 0);
    iframe.setAttribute("height", 0);
    
    queboton.setAttribute("value","VER MAPA");
    queboton.setAttribute("onclick","prueba('"+laruta+"','"+eliframe+"','"+elboton+"');");
    
    }
    
    </script>
    
      Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com