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 Google Map with Latitude and Longitude in Asp.net Website

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


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

10 comments :

Anonymous said...

nice,
how we get latitude and longitude from map?

Anonymous said...

good
its very useful for me.

Unknown said...

Kya aap ya jo facebook ki div lagi hai side mai website kay is kay tutorial ba ker da saktay hain

Ravi said...

Hi suresh .i need longtitude and latitude. how it will get

Unknown said...

thank you so so so much

Anonymous said...

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

Unknown said...

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

Anonymous said...

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

Anonymous said...

plsss can u help me with this coding as earlier as possible

Mandy said...

Hi.....
I need to show list of states depending upon longitude and latitude and fill color in those villages .

Please direct me with that.

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.