IFrame Google MAP and Modal Popup in ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMap2.aspx.cs"  
Inherits="GoogleMap2" %>  

<%@ Register TagPrefix="ajaxToolkit" Assembly="AjaxControlToolkit"  
Namespace="AjaxControlToolkit" %>  
<!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 Page</title>  

<script type="text/javascript">  
  function showDialog()  
  {  
      var modalPopupBehaviorCtrl = $find('<%= mpeMap.ClientID %>');  
      modalPopupBehaviorCtrl.show();  
      document.getElementById('divMap').innerHTML  
= '<iframe runat="server" id="mm" width="600" height="450" frameborder="0"  
scrolling="no" marginheight="0" marginwidth="0"  
src="DisplayGoogleMap.aspx?lat=39.86887222271858&long=-75.35767078399658&desc=just%26a%26sample"><  
/iframe><br />';  
  }  
</script>  

</head>  
<body>  
<form id="Form1" runat="server" action="">  
  <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  <a id="showModalPopupClientButton" href="#" runat="server" onclick="showDialog();">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">  
      <div id="divMap">  
      </div>  
      <asp:Button runat="server" ID="cmdClose" Text="Close" />  
  </asp:Panel>  
  <iframe width="600" height="450" frameborder="0" scrolling="no" marginheight="0"  
      marginwidth="0"  
src="DisplayGoogleMap.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>  
</body>  
</html> 

DisplayGoogleMap.aspx

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="DisplayGoogleMap.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 id="Head1" runat="server">  
  <title>Untitled Document</title>  
  
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6TRHbwQ  
EdJQJYJodaur9XhTJQa0g3IQ9GZqIMmInSLzwtGDKaBQN9ma6JnCY1kf4R6Q-HCj5397ddA"  
      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>

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru