UPDATE: I have tried placing the button in the update panel but nothing happens. Firebug shows that the onclick is not fired.
I am working on a website using Google maps apiv3. I have a button through which I execute some logic using code behind of button_click and a javascript function. I am able to execute all the logic well but ultimately at the end the page reloads and I end up with nothing on the map.
<asp:Button ID="Button1" runat="server" style="z-index: 1; left: 573px; top: 146px; position: absolute"
Text="Show route" onclick="Button1_Click1"/>
Button_Click1:
protected void Button1_Click1(object sender, EventArgs e)
{
using (con = new MySqlConnection("server=localhost; uid=root;password=aaa;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);
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript: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);
}
}
Not much to bother about the logic in the code since its all fine. Only thing is I need to avoid this reload.