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