Introduction:
In this article I will explain how to show Google map with latitude and longitude using JavaScript in asp.net. We will enter latitude
and longitude, google map will show the location according to that. We need
Google PI key for that.
First Of all
generate Google API from Following Link:
Following Script is used to Get location using latitude and
Longitude:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key= AIzaSyCmDtfo3X1jx01kvj4Ef9intHm4oIvfrj4 &sensor=false">
<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>
In
key : create and replace your own key.
Full Source Code for sample
application:
<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= AIzaSyCmDtfo3X1jx01kvj4Ef9intHm4oIvfrj4 &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">
<fieldset style="width:300px">
<legend><strong>Show Google Map with Latitude and Longitude</strong></legend>
<table>
<tr>
<td>Enter Latitude:</td>
<td><input type="text" id="txtlat" value="32.053147716796578" /> </td>
</tr>
<tr>
<td>Enter Longitude:</td>
<td><input type="text" id="txtlon" value="77.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></fieldset>
</form>
</body>
</html>
0 comments:
Post a Comment