در این مقاله میخواهیم به نحوه ی پیاده سازی امکانات Google Maps برای یافتن موقعیت هر مکانی در Asp.net بپردازیم.
Google Maps یک محصول وب از کمپانی گوگل است.گوگل مپس یا گوگل مپ و به انگلیسی Google Mapsبه معنی نقشه‌های گوگل که درحال حاضر هم بصورت وب قابل مشاهده است و هم میتوانید آنرا بصورت اپلیکیشن پس از دریافت و نصب استفاده کنید.نقشه های گوگل در اصل عکسبرداری هوایی از مناطق کره زمین می باشد
ابتدا یک پروژه از نوع web form ایجاد میکنیم. و کدهای html ان را بصورت زیر درج میکنیم تا دیزاین برنامه طراحی گردد.
Webform مورد نظر را در قسمت design به شکل زیر طراحی کنید.
<head runat="server">
<title></title>
<!DOCTYPE link href="https://maps/documentation/javascript/examples/default.css" rel="stylesheet" />
<html>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script>
var mapcode;
var diag;
function initialize() {
mapcode = new google.maps.Geocoder();
var lnt = new google.maps.LatLng(26.45, 82.85);
var diagChoice = {
zoom: 9,
center: lnt,
diagId: google.maps.MapTypeId.ROADMAP
}
diag = new google.maps.Map(document.getElementById('map_populate'), diagChoice);
}
function getmap() {
var completeaddress = document.getElementById('txt_location').value;
mapcode.geocode({ 'address': completeaddress }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
diag.setCenter(results[0].geometry.location);
var hint = new google.maps.Marker({
diag: diag,
position: results[0].geometry.location
});
} else {
alert('Location Not Tracked. ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Enter Your Location Details</h1>
</div>
<div>
<asp:TextBox ID="txt_location" TextMode="MultiLine" Width="400px" Height="70px" runat="server"></asp:TextBox>
</div>
<div>
<input type="button" value="Search" onclick="getmap()">
</div>
<div id="map_populate" style="width:100%; height:500px; border: 5px solid #5E5454;">
</div>
</form>
برنامه پس از اجرا بصورت زیر نمایش داده میشود
در پایان پس از درج مکان مورد نظر خروجی به شکل زیر خواهد شد.
امیدوارم مورد توجه شما کاربران عزیز قرار گرفته باشد