Home/ Questions/Q 8522713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:12:10+00:00

I am working on a website using Google maps apiv3. I have a button

  • 0

I am working on a website using Google maps apiv3. I have a button in an update panel through which I execute some logic using code behind of button_click and a javascript function.

Since the button is in the update panel, I am unable to see anything in watch window of firebug and neither my breakpoints in javascript function work. Without an update panel I can see the execution flow in watch and everything works fine but I get a reload on map.

Code in aspx:

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" style="z-index: 1; left: 573px; top: 146px; position: absolute" Text="Show route" onclick="Button1_Click1"/>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
        </Triggers>
    </asp:UpdatePanel>

Button_Click1:

protected void Button1_Click1(object sender, EventArgs e)
{
    using (con = new MySqlConnection("server=localhost; uid=root;password=as64ws;database=Gmaps"))
    da = new MySqlDataAdapter("select * from routes where uid='a1'", con);
    da.Fill(ds, "mroute");
    foreach (DataRow r in ds.Tables[0].Rows)
    {
        uroute.Add(r["latlng"].ToString());
    }
    croute = new string[uroute.Count];
    croute = uroute.ToArray();
    hdncroute.Value = string.Join("&", croute);
    ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "routes", "droute()", true);
}

Javascript:

function droute()
{
    var route=[];
    var temp;
    temp = document.getElementById('<%= hdncroute.ClientID %>').value;
    route= temp.split('&');
    //Loop to add locations and draw line
    var path= polyline.getPath();
    for(var i=0;i<route.length;i++)
        {
            var input= route[i];
            var ltln = input.split(",",2);
            var lat=parseFloat(ltln[0]);
            var lng=parseFloat(ltln[1]);
            var pos= new google.maps.LatLng(lat,lng);
            var marker= new google.maps.Marker({position:pos,map:map});
            path.push(route[i]);
            google.maps.event.addListener(marker,'click',showiwindow);
        }
    function showiwindow(event)
    {
    iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
    iwindow.open(map,this);
    } 
}

I cant get the values to be displayed on the map. Should I place the button in update panel or the map in the update panel? Where am I going wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would scrap a good portion of your logic that you have.

    I would have the button click do a jquery ajax post to a webservice in your codebehind which would return an array back to your ajax post and then in the success portion of your ajax post I would trigger your javascript routine.

    http://dotnetguts.blogspot.com/2012/01/jquery-ajax-examples-by-calling-aspnet.html

    What I described above is how I do almost all of my google maps calls…….I haven’t seen a more appropriate way of doing this in the close to 100s of pages that I have read on this subject. Please let me know if you need to know more about how to do it this way.

    Here is another good page describing how to do the jquery ajax post. :

    Call code behind method from Jquery

    • 0