Click here to Skip to main content
15,882,552 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
I have a problem when I call a javascript google api function in asp.net from the OnClientClick event of a button, the function is executed, but the result is different the one shown when I run the function from at a html button, the function simply must assign a geographical coordenada a textbook control, the difference is that the html function in the parameter status is set to OK and the OnClientClick event of the asp button takes the value of ERROR, someone could help me, I don't know that I am doing wrong or I'm not considering the asp controls. I need the values ​​txtLng and txtLat for work with them in the CodeBehind.
Thank you in advance.

I show the code below:

Code Javascript:
JavaScript
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
	 			zoom: 8,
	 			center: latlng,
	 			mapTypeId: google.maps.MapTypeId.ROADMAP
	 		    }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
 
function codeAddress(txtAddressClientId, txtLatClientId, txtLngClientId) {
var address = window.document.getElementById(txtAddressClientId).value;
geocoder.geocode
({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
	var marker = new google.maps.Marker({
	 	map: map,
	 	position: results[0].geometry.location,
	 	title: results[0].formatted_address
	 	});
	document.getElementById(txtLatClientId).value = marker.position.lat()
	document.getElementById(txtLngClientId).value = marker.position.lng();
	}
	else {
	 		alert("Geocode was not successful for the following reason: " + status);
	 	}
	 });
} 	
</script> 


onClientClick event:
ASP.NET
<body onload="initialize();">
    <form id="form1" runat="server">
    <div>
    <asp:label ID="Label1" runat="server" text="lugar">
	 </asp:label> <br />
	 <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox> <br />
	 <asp:label ID="Label2" runat="server" text="latitud"> </asp:label> <br />
	 <asp:TextBox ID="txtLat" runat="server"></asp:TextBox> <br />
	 <asp:label ID="Label3" runat="server" text="longitud"></asp:label><br />
	 <asp:TextBox ID="txtLng" runat="server"></asp:TextBox> <br />
	 <asp:button id="btnBuscar" runat="server" text="Buscar" cssclass="btn" xmlns:asp="#unknown" />
 </div>
    </form>
</body>


code vb:
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
     btnBuscar.OnClientClick = "return codeAddress('" & txtAddress.ClientID & "','" & txtLat.ClientID & "','" & txtLng.ClientID & "')"
End Sub


If I use the same function in the onclick event of an input element of type button, the code does exactly what I want, but I want the code to run with asp.net button for taking control values ​​in codebehind.
Posted
Updated 26-Aug-14 11:07am
v18
Comments
Sergey Alexandrovich Kryukov 18-Aug-14 13:03pm    
How can we know that? You did not show pure Javascript anywhere.
—SA
danigeraleddin 18-Aug-14 15:37pm    
I wanted to show is that whether I use an element html input type button and its onclick event I call the function codeAddress get a different result than when I call the same function in the OnClientClick event of the button control of ASP.NET. I updated my post. Thanks.
SteveyJDay 19-Aug-14 16:37pm    
I see you updated your question, but still didn't include the Google JavaScript resource. I tried your code and as soon as I launch the page I get a script error referencing google.maps.Geocoder Please include the google javascript resource if you would like more help on this issue.
SteveyJDay 19-Aug-14 16:40pm    
Found it for you https://maps.googleapis.com/maps/api/js?v=3.exp
danigeraleddin 19-Aug-14 17:02pm    
Sorry,my English is bad, did not understand you meant to file,I forget to place the google api's script, I updated my post, I think the script is similar to that you have placed. but I'm working with which I have placed in the code. I appreciate your support.

You can't use '<%= txtLat.ClientID %>' in javascript. This is asp mark up.
JavaScript
document.getElementById('<%= txtLat.ClientID  %>').value = marker.position.lat()
document.getElementById('<%= txtLng.ClientID  %>').value = marker.position.lng();


Change function codeAddress()
JavaScript
function codeAddress()

to

function codeAddress(txtAddressClientId,txtLatClientId,txtLngClientId)


Replace javascript lines
JavaScript
var address = window.document.getElementById('<%= txtAddress.ClientID  %>').value;
document.getElementById('<%= txtLat.ClientID  %>').value = marker.position.lat()
document.getElementById('<%= txtLng.ClientID  %>').value = marker.position.lng();

With

var address = window.document.getElementById(txtAddressClientId).value;
document.getElementById(txtLatClientId).value = marker.position.lat()
document.getElementById(txtLngClientId).value = marker.position.lng();


Remove the onClientClick event. This will be set in the code behind.
ASP.NET
<asp:button id="btnBuscar" runat="server" text="Buscar" cssclass="btn" onclick="btnBuscar_Click" xmlns:asp="#unknown" />


In the code being set the onClientClick method.
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
     btnBuscar.OnClientClick = "return codeAddress('" & txtAddress.ClientID & "','" & txtLat.ClientID & "','" & txtLng.ClientID & "')"
End Sub
 
Share this answer
 
Comments
danigeraleddin 18-Aug-14 15:45pm    
Hi, Jared, Thanks very much for the post, I tested the code that you have suggested, I've tried it in the simplest possible way, I placed three textbook and a button on a page, and I have obtained the same result, the function runs and in the if statement jumps to where it would go, because the input data is correct, I do not know happens.
SteveyJDay 18-Aug-14 15:56pm    
Please repost your code with the suggestions I made.
danigeraleddin 18-Aug-14 16:27pm    
Hi, I Updated my post.
SteveyJDay 18-Aug-14 16:48pm    
Please post your entire page. The new "If I use:" you added should never work if you changed the javascript function as I suggested.
danigeraleddin 18-Aug-14 17:22pm    
Hi, Jared, I updated my post again. Thanks.
Here is a working example. The big change was having one button to perform the javascript actions with google and the other button to do the postback(btnSendValuesToCodeBehind). You will most likely want to hide btnSendValuesToCodeBehind don't set visible=false use style="display:none;"

ASPX Page:
ASP.NET
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Intranet.WebForm1" %>

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    document.getElementById('txtLat').value = marker.position.lat();
                    document.getElementById('txtLng').value = marker.position.lng();
                    document.getElementById('btnSendValuesToCodeBehind').click();
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="text" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
        <form runat="server">
            latitude<br />
            <asp:textbox id="txtLat" runat="server" asp:textbox> <br />
            longitude<br />
            <asp:textbox id="txtLng" runat="server" asp:textbox> 
            <asp:button id="btnSendValuesToCodeBehind" runat="server" text="Send Values To CodeBehind" />
        </form>
 
    </div>
    <div id="map-canvas"></div>
  </body>
</html>


Code Behind:
VB
Private Sub btnSendValuesToCodeBehind_Click(sender As Object, e As EventArgs) Handles btnSendValuesToCodeBehind.Click
    Dim latitude As String = txtLat.Text
    Dim longitude As String = txtLng.Text
End Sub
 
Share this answer
 
v2
Comments
danigeraleddin 19-Aug-14 18:44pm    
Hi, Jared, thank you very much for your help, I'll give a twist to what I had thought, my idea is to enter an address to know the place close to a vehicle, so I get the coordinates matter much, the only issue is that I work with asp buttons I can not hide it, but I can make a pre-query and work with your code in a HTML button and then send the data with my asp button. I appreciate your support.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900