نمایش گوگل مپ در سایت ASP.NET

محمد بروشکی Asp Form نظری بدهید 2,759 بازدید

در این آموزش درباره ی نمایش گوگل مپ در سایت ASP.NET برای پیدا کردن موقعیت های گوناگون توضیح داده می شود

مقدمه

Google Map یک سرویس مبتنی بر وب (Web-based) است که اطلاعات مفید و جزئی را در مورد موقعیت جغرافیایی و مکان های مختلف در سرتاسر جهان فراهم می کند. Google Map ابتدا به صورت یک برنامه desktop به زبان ++c توسط Lars و Jens Eilstrup طراحی شد.در اکتبر ۲۰۰۴ شرکت گوگل شرکت توسعه دهنده Google Map را خرید و آن را به یک برنامه وب تبدیل کرد.

پیش زمینه

امروزه Google Map در بسیاری از applicationها به دلایل مختلف استفاده می شود. در این راهنما ما نحوه پیاده سازی Google Map به برنامه های ASP.NET را توضیح می دهیم.

ابتدا برای افزودن این سرویس یک پروژه جدید در Visual studio ایجاد کنید.یک web form به صورت زیر به آن اضافه کنید.

web form را به صورت زیر طراحی کنید:

script زیر را به قسمت head اضافه کنید

<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

حالا دستورات زیر را در تگ div اضافه کنید تا Google Map به برنامه اضافه شود.

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