I'm embedding an iFrame in the ModalPopupExtender which loads a page that has a Google Map on it. When I load the page that has the map either directly or through an iFrame on the page the map centers properly but if I load it in the ModalPopupExtender, my map is off center. Anyone have any ideas on why this happens or if there is a work around? There are parameters for the minimap2.apsx page but they just populate the hidden fields which I've given defaults. This happens in ie and ff.
Parent Page:
<form runat="server" action="">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<a id="showModalPopupClientButton" href="#" runat="server">Click Me</a><br /><br /><br />
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:Panel runat="server" ID="Panel1" Style="display:none;width:600px;height:475px;" CssClass="modalPopup">
<iframe width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="minimap2.aspx?lat=39.86887222271858&long=-75.35767078399658&desc=just%26a%26sample"></iframe><br />
<asp:Button runat="server" ID="cmdClose" Text="Close" />
</asp:Panel>
<iframe width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="minimap2.aspx?lat=39.86887222271858&long=-75.35767078399658&desc=just%26a%26sample"></iframe><br />
<ajaxToolkit:ModalPopupExtender ID="mpeMap" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
CancelControlID="cmdClose"
OkControlID="cmdClose"
/>
</form>
minimap2.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="minimap2.aspx.cs" Inherits="minimap2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA_XiVe3s1cch6aJ-k4pFNjRQAlgRJcslAtUBAvx2XFbBowwn5jxTJXB-9lVOvGtDSThRTDM1pmzlXug" type="text/javascript"></script>
<script type="text/javascript">
var map;
var icon0;
var newpoints = new Array();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(loadMap);
addLoadEvent(addPoints);
function loadMap()
{
var dLat = Number(document.getElementById('<%= hdLat.ClientID %>').value);
var dLong = Number(document.getElementById('<%= hdLong.ClientID %>').value);
var sCaption = document.getElementById('<%= hdCaption.ClientID %>').value;
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( dLat, dLong), 13);
map.setMapType(G_MAP_TYPE);
//G_MAP_TYPE, G_SATELLITE_TYPE, or G_HYBRID_TYPE
icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}
function addPoints()
{
var dLat = Number(document.getElementById('<%= hdLat.ClientID %>').value);
var dLong = Number(document.getElementById('<%= hdLong.ClientID %>').value);
var sCaption = document.getElementById('<%= hdCaption.ClientID %>').value;
newpoints[0] = new Array(dLat, dLong, icon0, 'Picture', sCaption);
for(var i = 0; i < newpoints.length; i++) {
var point = new GPoint(newpoints[i][1],newpoints[i][0]);
var popuphtml = newpoints[i][4] ;
var marker = createMarker(point,newpoints[i][2],popuphtml);
map.addOverlay(marker);
}
}
function createMarker(point, icon, popuphtml)
{
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
});
return marker;
}
</script>
<style type="text/css">
div#popup
{
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" Value="39.869053382069" ID="hdLat" />
<asp:HiddenField runat="server" Value="-75.35773515701294" ID="hdLong" />
<asp:HiddenField runat="server" Value="Test" ID="hdCaption" />
<div id="map" style="width: 600px; height: 450px">
</div>
</form>
</body>
</html>