Page 1 of 1
CGGoogleMaps in Modal PopUp
Posted: Mon Jul 29, 2013 9:29 am
by allan1412
Has anyone been able to display two versions of the same CGGoogleMap on the same page.
A small version with a link below to open a larger version in a Modal PopUp window.
It's the Modal PopUp version that I can't get to display correctly - it only shows a top corner of a map with rest grey. The rest of the map appears when the browser window is resized but the map marker icon isn't centered in the map.
Any ideas?
Thanks
Re: CGGoogleMaps in Modal PopUp
Posted: Mon Jul 29, 2013 9:59 am
by velden
Sounds like a non-CGGoogleMaps issue. More likely JS.
Do you have a working link to the site?
Re: CGGoogleMaps in Modal PopUp
Posted: Mon Jul 29, 2013 10:21 am
by allan1412
Hi - Thanks for the reply. I'm afraid the site is not yet online. I'm just using a simple modal popup script and jquery.
{literal}
<__script__ type="text/javascript">
$(document).ready(function() {
$('a.modaltrigger').click(function() {
//Getting the variable's value from a link
var modalwindow = $(this).attr('href');
//Fade in the Popup
$(modalwindow).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(modalwindow).height() + 24) / 2;
var popMargLeft = ($(modalwindow).width() + 24) / 2;
$(modalwindow).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 , .modalpopup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</__script>
{/literal}