SHOWING GOOGLE MAP WITH ADDRESS BY ENTERED LATITUDE AND LONGITUDE USING GOOGLE MAPS JAVASCRIPT API V3 IN ASP.NET
Steps:
1. Open Google API Console URL
2.Click On Services
3.Status ON Google Maps JavaScript API v3
4. Next Click on API Access
5. Click on
6. In popup window enter URL (In which showing map)
7.Click on create Button
8. We will get API key: AIzaSyA8BikRTWi9qrpITNrxcvNWrnXuOarY2XA
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMapOnLatLong.aspx.cs"Inherits="GoogleMapOnLatLong" %>
7.Click on create Button
8. We will get API key: AIzaSyA8BikRTWi9qrpITNrxcvNWrnXuOarY2XA
9. Enter in Java script URL
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMapOnLatLong.aspx.cs"Inherits="GoogleMapOnLatLong" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API key:AIzaSyA8BikRTWi9qrpITNrxcvNWrnXuOarY2XA&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker = null;
function initialize() {
geocoder = new google.maps.Geocoder();
var lat = document.getElementById('txtlati').value;
var lng = document.getElementById('txtlongi').value;
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeLatLng() {
var lat = document.getElementById('txtlati').value;
var lng = document.getElementById('txtlongi').value;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
}
else {
alert('Geocoder failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="codeLatLng()">
<form id="form1" runat="server">
<div>
<table style="display: none;">
<tr>
<td>
<input type="text" id="txtlati" runat="server" value="17.4360155" /></td>
</tr>
<tr>
<td>
<input type="text" id="txtlongi" runat="server" value="78.4408633" /></td>
</tr>
</table>
<div id="map-canvas" style="width: 100%; height: 200px"></div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment