Introduction:
Here
I will explain how to show Google map with latitude and
longitude using JavaScript in asp.net website or Display Google map based on latitude and
longitude in asp.net website example.
Description:
In
previous article I explained clearly how to add Google map to website in
asp.net,
Add marker to Google map in asp.net
website,
Add multiple markers to Google map
using JSON,
Add custom marker to Google maps API,
Show infowindow in Google map when click on marker and many articles relating to jQuery, JavaScript, asp.net. Now I will explain how
to show Google map with latitude and
longitude in asp.net website.
Before
show Google map with latitude and
longitude in website 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>Show Google Map with Latitude and Longitude 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">
function initialize() {
var lat = document.getElementById('txtlat').value;
var lon = document.getElementById('txtlon').value;
var myLatlng = new
google.maps.LatLng(lat, lon) // This is used to
center the map to show our markers
var mapOptions = {
center: myLatlng,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker: true
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new
google.maps.Marker({
position: myLatlng
});
marker.setMap(map);
}
</script>
</head>
<body >
<form id="form1"
runat="server">
<table>
<tr>
<td>Enter Latitude:</td>
<td><input type="text" id="txtlat" value="13.053147716796578" /> </td>
</tr>
<tr>
<td>Enter Longitude:</td>
<td><input type="text" id="txtlon" value="80.2501953125" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" onclick="javascript:initialize()" /> </td>
</tr>
</table>
<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
|
|||
10 comments :
nice,
how we get latitude and longitude from map?
good
its very useful for me.
Kya aap ya jo facebook ki div lagi hai side mai website kay is kay tutorial ba ker da saktay hain
Hi suresh .i need longtitude and latitude. how it will get
thank you so so so much
if you want any langitude and latitude ...goto google map ,enter which area u want ... and it display your selected area ...Now goto mouse pointer on that , right click on select location and select "what's here?"
Suresh please give me answer as early as possible
how to get Location information by longitude and latitude?
this is must important for me so give me response yaar......
the code was useful.......thank u for dat ... but i need a coding for tracing the location from the image uploaded to a website may be by tracking the ipaddress and then the location from the ipaddress ...i.e..,the input is given by the user
plsss can u help me with this coding as earlier as possible
Hi.....
I need to show list of states depending upon longitude and latitude and fill color in those villages .
Please direct me with that.
Note: Only a member of this blog may post a comment.