Calling a javascript function through an ASP.NET button.

See more:

ASP.NET

Google-Maps

Hey Guys,

I am encountering a problem regarding how to call a javascript function using an ASP.NET button.
My javascript is as follows:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript" type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var unitSystem;

function InitializeMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(19.082063,72.888215);
var myOptions =
{
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById('directionpanel'));

// string xxxx = directionsDisplay.toString();
// prompt(xxxx);


var control = document.getElementById('control');
control.style.display = 'block';


}



function calcRoute() {

var start = document.getElementById('startvalue').value;
var end = document.getElementById('endvalue').value;
var request = {
origin: start,
destination: end,
provideRouteAlternatives: true,
unitSystem: google.maps.UnitSystem.METRIC,
travelMode: google.maps.DirectionsTravelMode.TRANSIT,
transitOptions: {
departureTime: new Date(1362568344000)
}



};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});

}

function Button1_onclick() {
calcRoute();
}

window.onload = InitializeMap;
</script>


My ASP.NET button code is:

<asp:Button ID="Button2" runat="server" onclick="Button2_Click" onclientclick="return calcRoute()" Text="Button"/>

Whenever I click this button the page just gets refreshed.
Please give me a solution or alternative on this.

Thank U.