javascripts google api function behaves differently in events onclick and OnClientClick of asp and html buttons

Question

2.00/5 (1 vote)

See more:

, +

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 18-Aug-14 5:38am

danigeraleddin

Updated 26-Aug-14 11:07am

v18

Add a Solution

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.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

SteveyJDay · Accepted Answer · 2014-08-18T07:38:00

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

SteveyJDay · Accepted Answer · 2014-08-19T11:28:00

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

javascripts google api function behaves differently in events onclick and OnClientClick of asp and html buttons

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0