Hi Larry, Many thanks for the swift reply.
I can't for the life of me get it to work. I've stripped everything out of the .net control I’ve built and created a simplified aspx page. It's almost there but not quite, the map is displayed but not completely. If any of the links on the right are selected the whole map is display. I know code isn't supposed to be uploaded however without the code it doesn't make much sense. Many, many thanks, Luke <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EMangoGoogleMapExtender.aspx.cs" Inherits="EMangoGoogleMapExtender" %> <%@ 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"> <html xmlns="http://www.w3.org/1999/xhtml";> <head runat="server"> <title></title> </head> <head> <title></title> <script src="http://maps.google.com/maps? file=api&v=2&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script> </head> <style> .modalBackground { background-color: #707070; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } .modalPopup { background-color: #efefef; border: solid 3px Gray; color: #222; height: 450px; padding: 10px; width: 750px; } .modalPopupLarge { background-color: #770000; border: solid 3px Gray; color: #222; height: 650px; padding: 10px; width: 1225px; } .modalPopupContent { background-color: #fff; border: solid 1px #000; height: 420px; margin-bottom: 10px; overflow: -moz-scrollbars-vertical; overflow: auto; padding: 10px; } .modalPopupContentLarge { background-color: #fff; border: solid 1px #000; height: 500px; margin-bottom: 10px; overflow: -moz-scrollbars-vertical; overflow: auto; padding: 10px; } </style> <body> <form runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server" /> <script type='text/javascript'> <!-- window.onload = function() { MakeMap('GoogleMap','<xml><Placemark><name>Hello</ name><detail><b>Yorkshire CCC</ b><p>a:Headingley<br />&nbsp;&nbsp; Kirkstall Lane<br />&nbsp;&nbsp; Headingley<br / >&nbsp;&nbsp; Leeds<br />t:0870-4296774<br />f: 0113-2784099<br />e:[email protected]<br>w:<a href="http://www.yorkshireccc.com">http://www.yorkshireccc.com</ a></p></detail><profile><p><a href="//Directory/ Detail.aspx?DirectoryUid=29e0315e-ebb0-4514-988d-a13c0ea781fb" target="_self">more information</a></p></ profile><Point><coordinates>-1.58099,53.81693,0</coordinates></ Point><longitude>-1.58099</longitude><latitude>53.81693</latitude></ Placemark><Placemark><name>The Celtic Manor Resort</ name><detail><b>The Celtic Manor Resort</ b><p>a:Coldra Woods<br />&nbsp;&nbsp; The Usk Valley<br />&nbsp;&nbsp; Newport<br />t:+44 (0) 1633 410 262 <br />f:<br />e:<br>w:<a href="http://www.celtic-manor.com">http://www.celtic-manor.com</ a></p></detail><profile><p><a href="//Directory/ Detail.aspx?DirectoryUid=a49da68b-14d1-4cce-ae23-72e26e9432a4" target="_self">more information</a></p></ profile><Point><coordinates>-2.93211,51.60819,0</coordinates></ Point><longitude>-2.93211</longitude><latitude>51.60819</latitude></ Placemark><Placemark><name>Surrey CCC</name><detail><b>Surrey CCC</b><p>a:The Oval<br />&nbsp;&nbsp; aka The Brit Oval<br />&nbsp;&nbsp; London<br />t: 08712 461100 <br />f:020 7735 7769<br / >e:[email protected]<br>w:<a href="http:// www.surreycricket.com">http://www.surreycricket.com</a></p></detail><profile><p><a href="//Directory/Detail.aspx?DirectoryUid=09ff463b-f227-42d6-90d2- c86090bdd1ae" target="_self">more information</a></p></ profile><Point><coordinates>-0.11463,51.48295,0</coordinates></ Point><longitude>-0.11463</longitude><latitude>51.48295</latitude></ Placemark><Placemark><name>St Andrews</name><detail><b>St Andrews</b><p>a:Pilmour House<br / >&nbsp;&nbsp; St Andrews<br />&nbsp;&nbsp; Fife<br />&nbsp;&nbsp; Scotland<br />t:+44 (0) 1334 466666 <br />f:<br />e:<br>w:<a href="http:// www.standrews.org.uk">http://www.standrews.org.uk</a></p></detail><profile><p><a href="//Directory/Detail.aspx?DirectoryUid=6f302ce2-26d1-43ee- a96b-8c8b55514f41" target="_self">more information</a></ p></profile><Point><coordinates>-2.82648,56.34479,0</coordinates></ Point><longitude>-2.82648</longitude><latitude>56.34479</latitude></ Placemark><Placemark><name>Fulham FC</name><detail><b>Fulham FC</b><p>a:Craven Cottage<br / >&nbsp;&nbsp;Stevenage Road<br />&nbsp;&nbsp; London<br />t:0870 442 1222<br />f:0207 384 4715<br / >e:<br>w:<a href="http://www.fulhamfc.com">http:// www.fulhamfc.com</a></p></detail><profile><p><a href="//Directory/Detail.aspx? DirectoryUid=e9ee0db0-903d-41a5-8ce4-6615c9ffc471" target="_self">more information</a></p></ profile><Point><coordinates>-0.22057,51.47453,0</coordinates></ Point><longitude>-0.22057</longitude><latitude>51.47453</latitude></ Placemark><Placemark><name>Hampshire CC</ name><detail><b>Hampshire CC</b><p>a:The Hampshire Rose Bowl<br />&nbsp;&nbsp;Botley Road<br / >&nbsp;&nbsp; West End<br / >&nbsp;&nbsp;Southampton<br / >&nbsp;&nbsp;Hampshire<br />t:023 8047 2002<br / >f:023 8047 2122<br / >e:[email protected]<br>w:<a href="http:// www.rosebowlplc.com">http://www.rosebowlplc.com</a></p></detail><profile><p><a href="//Directory/Detail.aspx?DirectoryUid=50e2d2d4-63e6-4553- b377-3738cd7809ab" target="_self">more information</a></ p></profile><Point><coordinates>-1.32342,50.92342,0</coordinates></ Point><longitude>-1.32342</longitude><latitude>50.92342</latitude></ Placemark><Placemark><name>Everton FC</name><detail><b>Everton FC</b><p>a:Goodison Park<br / >&nbsp;&nbsp;Goodison Road<br />&nbsp;&nbsp; Liverpool<br />t:<br />f:<br />e:<br>w:<a href="></a></p></detail><profile><p><a href="// Directory/Detail.aspx?DirectoryUid=35aafd19- b284-4196-8619-465fdc3d3789" target="_self">more information</ a></p></profile><Point><coordinates>-2.96701,53.43921,0</ coordinates></Point><longitude>-2.96701</longitude><latitude>53.43921</ latitude></Placemark><Placemark><name>Chelsea FC</ name><detail><b>Chelsea FC</b><p>a:Stamford Bridge<br />&nbsp;&nbsp;Fulham Road<br / >&nbsp;&nbsp; London<br />t:<br />f:<br / >e:<br>w:<a href="http://www.chelseafc.com">http:// www.chelseafc.com</a></p></detail><profile><p><a href="//Directory/Detail.aspx? DirectoryUid=c4110846-6897-4e8b-9314-6b15d5b0c68d" target="_self">more information</a></p></ profile><Point><coordinates>-0.19027,51.48112,0</coordinates></ Point><longitude>-0.19027</longitude><latitude>51.48112</latitude></ Placemark><Placemark><name>Arsenal FC</name><detail><b>Arsenal FC</b><p>a:Emirates Stadium<br / >&nbsp;&nbsp; Holloway<br />&nbsp;&nbsp; Islington<br />&nbsp;&nbsp;London<br />t:0207 619 5003<br />f:0207 704 4001<br />e:<br>w:<a href="http://www.arsenal.com/">http://www.arsenal.com/</ a></p></detail><profile><p><a href="//Directory/ Detail.aspx?DirectoryUid=a30668f3-b62a-488a-8c82-2f8975c65d8e" target="_self">more information</a></p></ profile><Point><coordinates>-0.10221,51.55793,0</coordinates></ Point><longitude>-0.10221</longitude><latitude>51.55793</latitude></ Placemark><Placemark><name>Aston Villa</name><detail><b>Aston Villa</b><p>a:Villa Park<br />&nbsp;&nbsp; Trinity Rd<br />&nbsp;&nbsp; Birmingham<br />t: 0121 327 2299<br />f:0121 322 2107<br / >e:<br>w:<a href="http://www.avfc.co.uk">http:// www.avfc.co.uk</a></p></detail><profile><p><a href="//Directory/Detail.aspx?DirectoryUid=1de007dd-8622-40e8-ba36- f2e11ebf4e38" target="_self">more information</a></p></ profile><Point><coordinates>-1.88494,52.50850,0</coordinates></ Point><longitude>-1.88494</longitude><latitude>52.50850</latitude></ Placemark></xml>','True','True','False','GLargeMapControl','False'); }; // --> </script> <asp:LinkButton ID="LinkButton1" runat="server">Google Map</ asp:LinkButton> <asp:Panel ID="pnlPopup" runat="server" Style="display: none;" CssClass="modalPopupLarge"> <div id="GoogleMap" style="width: 600px; height: 400px; float:left; border: 1px solid black;"></div> <div id="GoogleMapSideBar" style="width: 100px; height: 230px; float:left; border: 5px solid green;"></div> <asp:LinkButton ID="LinkButtonCancel" Text="Google Map" runat="server">Close</asp:LinkButton> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlPopup" TargetControlID="LinkButton1" DropShadow="true" BackgroundCssClass="modalBackground" CancelControlID="LinkButtonCancel"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript"> /* <![CDATA[ */ var gmarkers = []; var gicons = []; var mapmarkers = []; var map; function createMarker(googleMapId, tabbedMarker, point, name, htmls, labels, draggable, icon) { var img = new GIcon(G_DEFAULT_ICON, icon); //var marker = new GMarker(point, { draggable: draggable, title: name, icon: img }); var marker = new GMarker(point, { draggable: draggable, title: name }); marker.myname = name; marker.hide(); if (tabbedMarker == "True") { GEvent.addListener(marker, "click", function() { // adjust the width so that the info window is large enough for this many tabs if (htmls.length > 2) { htmls[0] = '<div style="width:' + htmls.length * 88 + 'px">' + htmls[0] + '<\/div>'; } var tabs = []; for (var i = 0; i < htmls.length; i++) { tabs.push(new GInfoWindowTab(labels[i], htmls [i])); } marker.openInfoWindowTabsHtml(tabs, { maxWidth: 200 }); }); } if (draggable == "True") { GEvent.addListener(marker, "dragend", function() { var pt = marker.getPoint(); map.panTo(pt); document.getElementById(googleMapId + "Latitude").value = pt.lat(); document.getElementById(googleMapId + "Longitude").value = pt.lng(); }); } gmarkers.push(marker); return marker; } function myclick(i) { GEvent.trigger(gmarkers[i], "click"); } function makeSidebar(googleMapId) { var html = ""; for (var i = 0; i < mapmarkers.length; i++) { if (!mapmarkers[i].isHidden()) { html += '<img src="' + mapmarkers[i].getIcon().image + '"><a href="javascript:myclick(' + i + ')">' + mapmarkers[i].myname + '<\/a><br><br>'; } } document.getElementById(googleMapId + "SideBar").innerHTML = html; } function ChangeMarkers(googleMapId, link) { map = new GMap2(document.getElementById(googleMapId)); var pageNumber = parseInt(document.getElementById(googleMapId + "PageNumber").value); var resultsPerMap = parseInt(document.getElementById (googleMapId + "ResultsPerMap").value); var totalPages = parseInt(document.getElementById(googleMapId + "TotalPages").value); var totalNumberOfResults = parseInt(document.getElementById (googleMapId + "TotalNumberOfResults").value); if (link == "next") { pageNumber = pageNumber + 1; } if (link == "first") { pageNumber = 1; } if (link == "last") { pageNumber = totalPages; } if (link == "previous") { pageNumber = pageNumber - 1; } var start = (pageNumber - 1) * resultsPerMap; var end = pageNumber * resultsPerMap; map.setCenter(new GLatLng(0, 0), 0); var bounds = new GLatLngBounds(); mapmarkers = []; map.clearOverlays(); if (end > totalNumberOfResults) { end = totalNumberOfResults; } for (var i = start; i < end; i++) { mapmarkers.push(gmarkers[i]); map.addOverlay(gmarkers[i]); var point = gmarkers[i].getPoint(); bounds.extend(point); } makeSidebar(googleMapId); map.setZoom(map.getBoundsZoomLevel(bounds)); map.setCenter(bounds.getCenter()); document.getElementById(googleMapId + "PageNumber").value = pageNumber; } function MakeMap(googleMapId, xml, isTabbedMarker, isDirectorySearch, isMarkerDraggable, mapControlType, showOverviewMapControl, markerType) { if (GBrowserIsCompatible()) { var mapwidth = 600; var mapheight = 400; map = new GMap2(document.getElementById(googleMapId), { size: new GSize (mapwidth, mapheight) }); map.setCenter(new GLatLng(0, 0), 0); var bounds = new GLatLngBounds(); var mapControl = new GHierarchicalMapTypeControl(); mapControl.clearRelationships(); mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false); map.addControl(mapControl); if (mapControlType == 'GLargeMapControl') { map.addControl(new GLargeMapControl()); } else if (mapControlType == 'GSmallMapControl') { map.addControl(new GSmallMapControl()); } else { map.addControl(new GSmallZoomControl()); } var xml = GXml.parse(xml); var placemarks = xml.documentElement.getElementsByTagName ("Placemark"); var markerCount = 0; for (var i = 0; i < placemarks.length; i++) { var placemark = xml.getElementsByTagName("Placemark") [i]; var latitude = xml.getElementsByTagName("Placemark") [i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue; var longitude = xml.getElementsByTagName("Placemark") [i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue; var point = new GLatLng(latitude, longitude); var name = xml.getElementsByTagName("Placemark") [i].getElementsByTagName("name")[0].childNodes[0].nodeValue; if (isTabbedMarker == "True") { var detail = xml.getElementsByTagName("Placemark") [i].getElementsByTagName("detail")[0].childNodes[0].nodeValue; var profile = xml.getElementsByTagName("Placemark") [i].getElementsByTagName("profile")[0].childNodes[0].nodeValue; profile = profile.replace(/&rquo;/, "'"); } var icon = "/Resource/Design/Icon/GoogleMap/ googleMapPin" + markerCount + ".png"; var marker = createMarker(googleMapId, isTabbedMarker, point, name, [detail, profile], ["Details", "Profile"], isMarkerDraggable, icon); if ((isMarkerDraggable == "True") && (isDirectorySearch == "False")) { document.getElementById(googleMapId + "Latitude").value = point.lat(); document.getElementById(googleMapId + "Longitude").value = point.lng(); } //if (i >= start && i <= end) { map.addOverlay(marker); bounds.extend(point); mapmarkers.push(marker); //} } map.setZoom(map.getBoundsZoomLevel(bounds)); map.setCenter(bounds.getCenter()); map.enableScrollWheelZoom(); map.checkResize(); window.onresize = function() { window.map.checkResize(); }; if (isDirectorySearch == "True") { makeSidebar(googleMapId); } } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } } /* ]]> */ </script> </form> </body> </html> On Jan 30, 5:50 pm, "[email protected]" <[email protected]> wrote: > On Jan 30, 9:29 am, "[email protected]" <[email protected]> > wrote: > > > Hiya, > > > I'm having problems displaying a Google map correctly in a modal > > window using ASP.net. > > > Everything works fine when the map is not in the modal panel. > > > The xml is being processed correctly and the markers are pushed onto > > the map. However the map isn't displayed correctly in the div element, > > only the bottom right of the map is being displayed in the top right > > corner of the div. Also the map.setCenter(bounds.getCenter()) isn't > > either working. As I mentioned previously everything is alright when > > I'm not using a modal window. > > Sounds like a problem with the map object thinking the size of the div > is zero. Try using size option in the GMap2 constructor or calling > GMap2.checkResize() after the map is displayed. > > -- Larry --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/Google-Maps-API?hl=en -~----------~----~----~----~------~----~------~--~---
