Localization: Loading a Google Map in a ModalPopup - Are Client Page Life-cycle Events Available?

Hello
I've been wrestling with this for a few days. What I'm trying to do is have a Google Map load in a ModalPopup. The problem that seems to be occurring is that the Google Map load function needs to be called once the ModalPopup as taken focus, not before. I've tried to capture a Client Page Life-cycle Event, but I can't seem to bind to any when using the ModalPopupExtender.

Any help on this would be greatly appreciated.
I've included the code to demonstrate what happening.

Note: On the page in the ModalPopup the Goggle Map button will launch the load function and you will see the map displayed correctly and operable.

Thanks in advance for any help!
-Nick

<%@dotnet.itags.org. Page Language="VB" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work fromhttp://localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>

<%--Google Map Key Forhttp://localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>

Here is a repost of the code, hope it doesn't break the form this time:

<%@. Page Language="VB" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work from http//localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>

<%--Google Map Key For http//localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>

We'll be adding events like the one you want soon, though they're not there yet. You could probably add the one you need fairly easily with a small change or two to your ModalPopupBehavior.js.

Wednesday, March 21, 2012

Loading a Google Map in a ModalPopup - Are Client Page Life-cycle Events Available?

No comments:

Post a Comment

Localization

Blog Archive

About Me