I want to display different 3 maps in the same page by clicking on 3 different buttons. I used this code but I don't know how to swich betwen the maps by clicking on the buttons. I think I need a javascript functions but I dont know how to do it. I am new in web programming
<!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>
First of all, be careful about cross-domain iframes, and now to get to the point.
you can use a variable to see which iframe you want to show.
let a = 0;
Now, you can use the jQuery $(obj).hide() or .show() functions to switch between the three.
// 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
}
}
This method only uses 1 button. If you want to use three buttons,
$(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)