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

14 comments :

Hitesh Hirpara said...
This comment has been removed by the author.
praveen kumar said...

Your website is excellent, nice code...

thank u.....

Vikram Shah said...

Nice and simple, all code working fine and good ,

faiza 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

Kiwiguy 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

JustMeNoOther said...

Can I do the same but with a button?

Thanks!

CatatanLaras said...

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

srinivas reddy Manukonda 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?

Jojo Kyababa 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.

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.