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.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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></title>
<script type="text/javascript">
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();
});
});
}
}
);
}
}
</script>
<script language="JavaScript">
<!--
var message = "";
function clickIE() { if (document.all) { (message); return false; } }
function clickNS(e) {
if
(document.layers || (document.getElementById && !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")
// -->
</script>
</head>
<body>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<form id="form1" runat="server">
<div>
Name:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
Address:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<br />
City:<asp:TextBox ID="TextBox3" runat="server" style="margin-bottom: 0px"></asp:TextBox>
<br />
<br />
Pincode:<asp:TextBox ID="TextBox4" runat="server" style="margin-bottom: 0px"></asp:TextBox>
<br />
<br />
Latitude:<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<br />
<br />
Longitude:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<asp:Button ID="button1" value="Show on Map" onclick="javascript:load1('ModalPopup','map1');" ></asp:Button>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="button1"
PopupControlID="map1" BackgroundCssClass="modalBackground" CancelControlID="CloseMapButton"
DropShadow="false" BehaviorID="ModalPopup" PopupDragHandleControlID="mapHeader" />
<div style="display:none;margin-top:100px;margin-left:100px;" id="map1" class="row" >
<div align="center" id="map" style="width:600px; height: 400px;">
</div>
</div>
</div>
</form>
</body>
</html>
I can’t understand why it is giving the targetcontrolid cannot be found.
Thanks,
I solved it. I added a hidden field above the modal popup and gave the id of the hidden field as the targetcontrolID.
Thanks all for viewing.