By default second city is hide. When click on second button, first city map will hide and second city map will show. But in there, second city map shows zoom out method. How to zoom in the Google map.
$(document).ready(function(){ $("#bangalore").click(function(){ $("#hyd").hide(); $("#ban").show(); }); $("#hyderabad").click(function(){ $("#ban").hide(); $("#hyd").show(); }); }); Hello in google map iframe we can not set directly as display:none see your demo
See this link
reload the iframe once when it's initially hidden:
$("#hyderabad").click(function () { $("#ban").hide(); $("#hyd").show(); }).one('click', function () { $("#hyd").prop('src', $("#hyd").attr('src')); }); http://jsfiddle.net/p67mq6wo/6/
Suggestion to save bandwith: only set the src of the initially visible iframe. For the other iframe(s) set an attribute data-src where you store the URL.
When you show the other iframes set the src to the data-src attribute:
$("#hyderabad").click(function () { $("#ban").hide(); $("#hyd").show(); }).one('click', function () { $("#hyd").prop('src', $("#hyd").data('src')); }); Especially when you have many hidden iframes the page will load much faster, because the maps will only be loaded when you show them.
http://jsfiddle.net/p67mq6wo/7/
Of course you may also use a single iframe and simply set the new src based on the clicked button.
