title: Google map in popup
body: <p>I m trying to display the google map in a pop up.
  I m getting the "The TargetControlID of 'ModalPopupExtender' is not valid. A control with ID 'button1' could not be found." error.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
   &lt;%@  Register TagPrefix="ajaxToolkit" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
       &lt;script type="text/javascript"&gt;
           function load1(ModalId,map1) {
  
               var popup = $find(ModalId);
               popup.show();
  
           load();
           showAddress();
       }
  
        function load() {
           document.getElementById("map1").style.display = "block";
  
           if (GBrowserIsCompatible()) {
               var map = new GMap2(document.getElementById("map"));
               map.addControl(new GSmallMapControl());
               map.addControl(new GMapTypeControl());
  
               var center = new GLatLng(19.0759837, 72.8776559);
               map.setCenter(center, 11);
               map.setMapType(G_SATELLITE_MAP);
               geocoder = new GClientGeocoder();
  
               var marker = new GMarker(center, { draggable: true });
               map.addOverlay(marker);
               document.getElementById("TextBox5").value = center.lat();
               document.getElementById("TextBox6").value = center.lng();
  
               geocoder = new GClientGeocoder();
  
               GEvent.addListener(marker, "dragend", function () {
                   var point = marker.getPoint();
                   map.panTo(point);
                   document.getElementById("TextBox5").value = point.lat();
                   document.getElementById("TextBox6").value = point.lng();
               });
  
               GEvent.addListener(map, "moveend", function () {
                   map.clearOverlays();
                   var center = map.getCenter();
                   var marker = new GMarker(center, { draggable: true });
                   map.addOverlay(marker);
                   document.getElementById("TextBox5").value = center.lat();
                   document.getElementById("TextBox6").value = center.lng();
  
                   GEvent.addListener(marker, "dragend", function () {
                       var point = marker.getPoint();
                       map.panTo(point);
                       document.getElementById("TextBox5").value = point.lat();
                      document.getElementById("TextBox6").value=point.lng();  
                   });
               });
           }
       }
  
       function showAddress() {
           address = document.getElementById("TextBox4").value;
           var map = new GMap2(document.getElementById("map"));
           map.addControl(new GSmallMapControl());
           map.addControl(new GMapTypeControl());
           if (geocoder) {
               geocoder.getLatLng(
  address,
  function (point) {
      if (!point) {
          alert(address + " city not found !");
      }
      else {
          document.getElementById("TextBox5").value = point.lat();
          document.getElementById("TextBox6").value = point.lng();
          map.clearOverlays()
          map.setCenter(point, 14);
          var marker = new GMarker(point, { draggable: true });
          map.addOverlay(marker);
      GEvent.addListener(marker, "dragend", function () {
          var pt = marker.getPoint();
          map.panTo(pt);
          document.getElementById("TextBox5").value = pt.lat();
          document.getElementById("TextBox6").value = pt.lng();
      });
  
      GEvent.addListener(map, "moveend", function () {
          map.clearOverlays();
          var center = map.getCenter();
          var marker = new GMarker(center, { draggable: true });
  
          map.addOverlay(marker);
          document.getElementById("TextBox5").value = center.lat();
          document.getElementById("TextBox6").value = center.lng();
  
          GEvent.addListener(marker, "dragend", function () {
              var pt = marker.getPoint();
              map.panTo(pt);
              document.getElementById("TextBox5").value = pt.lat();
              document.getElementById("TextBox6").value = pt.lng();
          });
  
  
        });
      } 
  }
  );
               } 
           }
  &lt;/script&gt;
   &lt;script language="JavaScript"&gt;
  &lt;!--
       var message = "";
       function clickIE() { if (document.all) { (message); return false; } }
       function clickNS(e) {
           if
  (document.layers || (document.getElementById &amp;&amp; !document.all)) {
               if (e.which == 2 || e.which == 3) { (message); return false; } 
           } 
       }
       if (document.layers)
       { document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clickNS; }
       else { document.onmouseup = clickNS; document.oncontextmenu = clickIE; }
       document.oncontextmenu = new Function("return false")
  // --&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;asp:ScriptManager ID="ScriptManager" runat="server" /&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
          Name:
          &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          Address:&lt;asp:TextBox ID="TextBox2" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          City:&lt;asp:TextBox ID="TextBox3" runat="server" style="margin-bottom: 0px"&gt;&lt;/asp:TextBox&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          Pincode:&lt;asp:TextBox ID="TextBox4" runat="server" style="margin-bottom: 0px"&gt;&lt;/asp:TextBox&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          Latitude:&lt;asp:TextBox ID="TextBox5" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          Longitude:&lt;asp:TextBox ID="TextBox6" runat="server"&gt;&lt;/asp:TextBox&gt;
       &lt;asp:Button ID="button1" value="Show on Map" onclick="javascript:load1('ModalPopup','map1');" &gt;&lt;/asp:Button&gt;
         &lt;ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="button1"
            PopupControlID="map1" BackgroundCssClass="modalBackground" CancelControlID="CloseMapButton"
            DropShadow="false" BehaviorID="ModalPopup" PopupDragHandleControlID="mapHeader" /&gt;
      &lt;div style="display:none;margin-top:100px;margin-left:100px;" id="map1" class="row" &gt;
  
      &lt;div align="center" id="map" style="width:600px; height: 400px;"&gt; 
                  &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
          &lt;/form&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>I can't understand why it is giving the targetcontrolid cannot be found.
  Thanks,          </p>