Description:-
In this example we explain that how to show user current location using Google map API (Geolocation) using javascript in asp.net and Get user current location details like latitude andlongitude using Google map API (Geolocation) using javascript in asp.net.
look at the above image in which my current location is display in Noida because i use this program in Ahmedabad so you use this code in your home then it will display the Google mapfor your city in which you are located.
this is very useful things or features of Google you can easily add in your website and show the location of the user.
look at the above image in which my current location is display in Noida because i use this program in Ahmedabad so you use this code in your home then it will display the Google mapfor your city in which you are located.
this is very useful things or features of Google you can easily add in your website and show the location of the user.
If would you like to show user current location details in in Google map with latitude andlongitude details then we first need to get Google API(Application programming interface).herelatitude and longitude are the coordinates for search location, as well as get the coordinates of a location you've already found on Google Maps.
What is Google API;-
An API may describe the path in which a particular task is performed.
How to Get Google Map API key for website:-
http://www.w3schools.com/googleAPI/google_maps_api_key.asp
-----------locationsearch.aspx.cs Code---------------------------
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="locationsearch.aspx.cs"
Inherits="Default3"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
No comments:
Post a Comment