Aspdotnet.Sunil Kumar

Show User Current Location on Google Map using GeoLocation API in Asp.net

Introduction:

Here I will explain how to show user current location using Google map API (Geolocation) using JavaScript inasp.net website or Get user current location details (latitude and longitude) using Google map API (Geolocation) in JavaScript asp.net website.

Description:

Now I will explain how to show user current location using Google mapAPI (Geolocation) using JavaScript in asp.net website.

To show user current location details in Google map with latitude and longitude first we need to get Google API key for that please check below url

Once you got the key write the following code in your aspx or html page like as shown below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="location_search.aspx.cs" Inherits="location_search" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">

</script>

</script>

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(success);

} else {

alert("Geo Location is not supported on your current browser!");

}

function success(position) {

var lat = position.coords.latitude;

var long = position.coords.longitude;

var city = position.coords.locality;

var myLatlng = new google.maps.LatLng(lat, long);

var myOptions = {

center: myLatlng,

zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({

position: myLatlng,

title: "lat: " + lat + " long: " + long

});

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" });

infowindow.open(map, marker);

}

</script>

</head>

<body >

</form>

</body>

</html>

Start and Stop a Timer in JavaScript | Function Execution Start and Stop in JavaScript in Asp.net

Introduction:

Here I will explain how to start and stop timer example inJavaScript or start and stop function execution using JavaScript in asp.net.

Description:

To execute function repeatedly with fixed time delay we have a function with two parameters calledsetInterval(functionname, timedelay)

In this function we need to call the required function in functionname field and we need to set the required time delay to execute the function in timedelay field.

To stop the execution of repeated action we have function clearInterval(intervalID)

Here intervalID is the identifier of the repeated action you want to cancel. This ID is returned from setInterval().

If you want to see it in example you need to write the code like as shown below

<head>

<title>Run JavaScript function at specific intervals of time</title>

var count=0,chkfn=null;

function changeColor() {

// Call function with 1000 milliseconds gap

chkfn = setInterval(starttimer, 1000);

}

function starttimer() {

count += 1;

var oElem = document.getElementById("divtxt");

oElem.style.color = oElem.style.color == "red" ? "blue" : "red";

document.getElementById("pcount").innerHTML = "Your Time Starts: " + count;

}

function stoptimer() {

clearInterval(chkfn);

chkfn = null;

count = 0;

document.getElementById("pcount").innerHTML = '';

}

</script>

</head>

<body>

</div>

<button onclick="changeColor();">Start Timer</button>

<button onclick="stoptimer();">Stop Timer</button>

</body>

</html>

JavaScript setTimeout Function Example

Introduction:

Here I will explain how to use JavaScript setTimeout function with example.JavaScript setTimeout()function is used to execute functions at regular intervals of time. Suppose if we want to execute oneJavaScript function for every 10 seconds or for a specific time we can use JavaScript setTimeout function to achieve this functionalit.

----------------For complete example check below code--------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JavaScript display current time on webpage</title>

function ShowCurrentTime() {

var dt = new Date();

document.getElementById("lblTime").innerHTML = dt.toLocaleTimeString();

setTimeout("ShowCurrentTime()", 1000); // Here 1000(milliseconds) means one 1 Sec

}

</script>

</head>

<div>

JavaScript Display current time second by second:

</div>

</body>

</html>

Registration Form Validation in JavaScript Source Code Using Asp.net

Introduction

Here I will explain how to validate user registration form in JavaScript with source code or JavaScript user registration form validation.

To implement this we need to write the code as shown below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Registration Form Validation in JavaScript Source Code</title>

function validate() {

var summary = "";

summary += isvaliduser();

summary += isvalidFirstname();

summary += isvalidLocation();

if (summary != "") {

alert(summary);

return false;

}

else {

return true;

}

function isvaliduser() {

var uid;

var temp = document.getElementById("<%=txtuser.ClientID %>");

uid = temp.value;

if (uid == "") {

return ("Please Enter UserName" + "\n");

}

else {

return "";

}

function isvalidFirstname() {

var uid;

var temp = document.getElementById("<%=txtfname.ClientID %>");

uid = temp.value;

if (uid == "") {

return ("Please enter firstname" + "\n");

}

else {

return "";

}

function isvalidLocation() {

var uid;

var temp = document.getElementById("<%=txtlocation.ClientID %>");

uid = temp.value;

if (uid == "") {

return ("Please enter Location" + "\n");

}

else {

return "";

}

</script>

</head>

<body>

<tr>

<td>UserName</td>

</tr>

<tr>

<td>First Name</td>

</tr>

<tr>

<td>Location</td>

</tr>

<tr>

<td>

<asp:Button ID="btnsubmit" runat="server" Text="Save"

OnClientClick ="javascript:validate()" />

</td>

</tr>

</table>

</form>

</body>

</html>

Aspdotnet.Sunil Kumar

Share Blog

Sunday, June 01, 2014

Show User Current Location on Google Map using GeoLocation API in Asp.net

Start and Stop a Timer in JavaScript | Function Execution Start and Stop in JavaScript in Asp.net

JavaScript setTimeout Function Example

Registration Form Validation in JavaScript Source Code Using Asp.net

BLOG ARCHIVE