I have inserted a google map created on my sites with the google application. This map is a pop-up window that opens when I hit a button and it takes up 100% of the screen. What I want now is to add an iframe that shows the time, but I can not get it to show on the google map screen. In this image I visually explain what I want to achieve:
<div style="display:none;">
<div class="iframe_temperatura" style="position:absolute;right:50%;top:50%;">
<?php echo $video['weather'];?>
</div>
<div id="mapa_google" class="code_<?php echo $count;?>">
<?php echo $video['code'];?>
</div>
</div>
<script type="text/javascript">
var url = $('.code_<?php echo $count;?> iframe').attr('src');
$('a.link_<?php echo $count;?>').attr('href', url);
</script>
/* CBOX */
/////////////////////////
$(".group1").colorbox({rel:"group1", innerWidth:"100%", innerHeight:"100%"});
$(".group2").colorbox({rel:"group2", transition:"fade", innerWidth:"100%", innerHeight:"100%"});
$(".group3").colorbox({rel:"group3", transition:"fade", innerWidth:"100%", innerHeight:"100%"});
$(".group4").colorbox({rel:"group4", slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, width:"100%", height:"100%"});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, innerWidth:"100%", innerHeight:"100%"});
$(".inline").colorbox({inline:true, innerWidth:"100%", innerHeight:"100%"});
$(window).resize(function(){
var alto_pantalla = $(window).height();
var ancho_pantalla = $(window).width();
if( $('#cboxOverlay').css( 'visibility' ) ){
$('.group1').colorbox.resize({ innerWidth:'100%',innerHeight:"100%" });
$(".group2").colorbox.resize({ innerWidth:'100%',innerHeight:"100%" });
$(".iframe").colorbox.resize({ innerWidth:'100%',innerHeight:"100%" });
$(".inline").colorbox.resize({ innerWidth:'100%',innerHeight:"100%" });
}
});
});