Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Show User Current Location on Google Map using GeoLocation API in Website

Jan 20, 2013
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:


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 RSS subscribe by email Subscribe by Email

26 comments :

Unknown said...
This comment has been removed by the author.
Unknown said...

Your website is excellent, nice code...

thank u.....

Unknown said...

Nice and simple, all code working fine and good ,

Anonymous said...

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

ajeet said...

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

Anonymous said...

Good article sir ,,,,

But what if we have to display multiple pin's

example all the Locations of a company in india or overseas.

Ravi said...

Hi sir, i need using longitude and lattitude get the location name

Kiwi-Rod said...

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

Unknown said...

Can I do the same but with a button?

Thanks!

CatatanLaras said...

whoaaaa nice post...
love it. many thanks :)

Unknown said...

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?

Unknown said...

This website saved my life, thank you sooooo much!

shantilal said...

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

Mohamnmed Irfan said...

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.

andy hakim said...

very nice web ... i like 100%

Unknown said...

how to integrate EBS in asp.net and how to use EBS in asp.net

kas said...

how get address instead of long and latid????

Twinkle Travel Diaries said...
This comment has been removed by the author.
Twinkle Travel Diaries said...

it's worked on webpage bt not work on mobile can u help ???

Mayank Desai said...

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.

mb said...

thank u for the article. but the location is not correct.

Unknown said...

hi I NEED cITY lOCATION IN TEXTBOX WITHOUT USING gOOGLE MAP hOW IT WILL DONE

suk@11 said...

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?

Unknown said...

thank you

Unknown said...

if i wanna show many employee current location on map by taking latitude and longitude from database....how can i do that??

Anonymous said...

Dear Sir,
I want code for live device location with line from start point to current location
and auto update current location

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.