Introduction:
Here
I will explain how to show user current location using Google map
API (Geolocation) using JavaScript in asp.net website or Get user
current location details (latitude and longitude) using Google map API (Geolocation) in
JavaScript asp.net website.
Description:
In
previous article I explained clearly how to add Google map to website in
asp.net,
Show Google Map with latitude and
longitude,
Add marker to Google map in asp.net
website,
Add multiple markers to Google map
using JSON,
Show infowindow in Google map when click on marker and many articles relating to Google Maps, jQuery, JavaScript, asp.net. Now I will explain how
to show user current location using Google map
API (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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get User Current Location using Google Map Geolocation API
Service in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
<script type="text/javascript">
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 id="form1"
runat="server">
<div id="map_canvas"
style="width: 500px; height: 400px"></div>
</form>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
26 comments :
Your website is excellent, nice code...
thank u.....
Nice and simple, all code working fine and good ,
I tried your code but its not working....I follow all the things.....Get api key v3....add refrence of the page.....execute the code.....But current location of user not working....kindly can u help me????
Thank u so much !!!
I followed ur procedure and now its working properly. Its showing the accurate address of the user correctly.
Once again thank u so much !!!
Good article sir ,,,,
But what if we have to display multiple pin's
example all the Locations of a company in india or overseas.
Hi sir, i need using longitude and lattitude get the location name
That's cool, I changed the values to 100% so it fills the whole page.
Question: can the map be a background image automatically (without asking to share location) so I can put a text box over the top in the middle of the page?
Regards Rod
Can I do the same but with a button?
Thanks!
whoaaaa nice post...
love it. many thanks :)
In General all of your posts are clear and easy to understand. Step by step approach. Would like to ask you to guide to track the location of an user(who is using smart phone) on the website by admin
(general staff while be having smart phone and admin will be tracking them through web application)Plz respond to srinureddy.rjy@gmail.com
can u tell me some way to solve the mystery plz?
This website saved my life, thank you sooooo much!
Dear sir this is code working but is only working andriod mobile not other so pls help how can work all mobile activate gprs so plr rply me
Dear, i want to get current position location address from google web API in .net passing to parameter latitude and longitude on button click event and get response of current location address in label. help me.
very nice web ... i like 100%
how to integrate EBS in asp.net and how to use EBS in asp.net
how get address instead of long and latid????
it's worked on webpage bt not work on mobile can u help ???
Nice article Suresh sir.
How to interactive google map with certain places based on coordinates and every time the mobile device reaches this coordinates an audio file and a text message will be launch.
thank u for the article. but the location is not correct.
hi I NEED cITY lOCATION IN TEXTBOX WITHOUT USING gOOGLE MAP hOW IT WILL DONE
Very well explained..
What if we want use data (Latitude and longitude)from android app in our asp.net website to track a location of an employee.
That is if an employee is for field work and he send his latitude and longitude through server then how can any one (admin) able to view it on website for tracking?
thank you
if i wanna show many employee current location on map by taking latitude and longitude from database....how can i do that??
Dear Sir,
I want code for live device location with line from start point to current location
and auto update current location
Note: Only a member of this blog may post a comment.