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
|
|||
|
|
8 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