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
 |
No comments:
Post a Comment