Quiero mostrar 3 mapas diferentes en la misma página haciendo clic en 3 botones diferentes. Usé este código pero no sé cómo cambiar entre los mapas haciendo clic en los botones. Creo que necesito funciones de JavaScript, pero no sé cómo hacerlo. soy nuevo en programacion web
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>MAps</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> </head> <body> <div class ="navButton"> <button class="btn bruce">Buton1 </button> <button class="btn info">Button2</button> <button class="btn warning">Buton3</button> </div> <iframe width="1700" height="1200" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="https://link to map1></iframe> <iframe width="1700" height="1200" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="https://link to map2></iframe> <iframe width="1700" height="1200" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="https://link to map3></iframe> </script> </script> </body> </html>En primer lugar, tenga cuidado con los iframes entre dominios, y ahora vaya al grano.
puede usar una variable para ver qué iframe desea mostrar.
let a = 0; Ahora, puede usar las funciones jQuery $(obj).hide() o .show() para alternar entre las tres.
// func() runs when button is clicked (<button onclick="func()">text</button> in the HTML) let a = 0; $(first_iframe).hide() $(second_iframe).hide() $(third_iframe).hide() function func() { if(a === 0) { $(first_iframe).show() $(second_iframe).hide() $(third_frame).hide() a++ } else if (a === 1) { $(first_iframe).hide() $(second_iframe).show() $(third_frame).hide() a++ } else if (a === 2) { $(first_iframe).hide() $(second_iframe).hide() $(third_frame).show() a = 0 } }Este método solo usa 1 botón. Si desea utilizar tres botones,
$(first_iframe).hide() $(second_iframe).hide() $(third_iframe).hide() function button1() { $(first_iframe).show() $(second_iframe).hide() $(third_frame).hide() } function button2() { $(first_iframe).hide() $(second_iframe).show() $(third_frame).hide() } function button3() { $(first_iframe).hide() $(second_iframe).hide() $(third_frame).show() } //add onclick events to the three buttons to their respective functions (in the html)