Am using the following code to show map in a popup window. But map does not show in the popup. It is working properly if i use http://www.w3schools.com instead of http://maps.google.co.uk/?q=USA.. Anybody please help.
<?php
echo "<div id='login-box' class='login-popup'>
<a href='#' class='close'><img src='binc/close_pop.png' class='btn_close' title='Close Window' alt='Close' /></a><br>
<iframe src='http://maps.google.co.uk/?q=USA'></iframe></div>";
<a class='login-window' style='color: #0000FF;font: 14px Helvetica;' href='#login-box'>USA</a>
?>
incuding the script jquery-1.6.4.js
<script>
$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
It could be possible that google breaks their normal page out of iframes or atleast checks for their existance and denies functionality (although i could not directly find this in the maps.google.com source, but then again.. its a mess 🙂 ).
Maps.google.com itself provides iframe embed source on maps.google.com though (press the ‘link’ icon (linked chains icon)).
For your specific case the iframe source would be:
Give it a try. Maybe this will solve your problem.
( I just noticed the iframe source uses the dutch text “Grotere kaart weergeven”, which means “Display full map”. Replace as you see fit )