CODEWITHSUNDEEP
javascriptasp.netgoogle-maps-api-3google-maps-markers
Shiridish
Shiridish

Reputation: 4962

Unable to pass Asp.net control's value to javascript function

I want to send Latitude and longitude values from two TextBoxes to a java script function that displays a marker at that location on the map.

I have written the following code but it doesn't work:

<script type="text/javascript">
var map;
function init()
{
    var mapoptions=
    {
        center: new google.maps.LatLng(17.379064211298, 78.478946685791),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
}    
function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>'),document.getElementById('<%=TextBox2.ClientID %>'));
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}   
</script>

Button controls code:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark()" />

Marker isn't displayed. Also Chrome console doesn't display any errors. Where am I wrong?

Upvotes: 0

Views: 857

Answers (4)

Jaime Torres
Jaime Torres

Reputation: 10515

According to the google API V3 reference, the constructor is

LatLng(lat:number, lng:number, noWrap?:boolean)

So your function could be:

function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

And update your button definition as:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(); return false;" />

But would probably be better as:

function placemark(lat, lng)
{
   var ulatlng= new google.maps.LatLng(lat,lng);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

And update your button to be:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value); return false" />

Either way, please ensure you include "return false" so your page does not postback, causing the refresh.

If you wanted to be even cleaner:

ASCX: 

<asp:Button ID="uxBtnPlaceMarker" runat="server" Text="Place Marker" />

Code behind:

   protected void Page_Load(Object sender, EventArgs args)
   {
       //...Do whatever you do here...
       this.uxBtnPlaceMarker.OnClientClick = string.Format("placemark(document.getElementById('{0}').value,document.getElementById('{1}').value); return false", TextBox1.ClientID, TextBox2.ClientID);
   }

Upvotes: 1

rohan panchal
rohan panchal

Reputation: 881

var ulatlng=  document.getElementById(TextBox1).value;

use like this this will work

Upvotes: 0

Conrad Lotz
Conrad Lotz

Reputation: 8828

Try getting the text boxes values instead:

var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value)

What you also can try is to zoom out on the map. The marker might be misplaced and show somewhere else (Lat Long swapped). To test replace the text boxes with the correct values and ensure that the marker displays

Upvotes: 0

Developer
Developer

Reputation: 767

You should use .value property of textbox. for example

    var mapCan = document.getElementById("map_can").value;

Upvotes: 0

Related Questions