Google cung cấp cho chúng ta dịch vụ miễn phí xem bản đồ trên trang web đó là Google Maps. Trong bài viết này tôi minh họa cách đơn giản để áp dụng vào việc chỉ dẫn đường đi hiển thị trên trang web khi cần. <a href="http://yenthai.vn/yenthai-route-pam.aspx" rel="clearbox[html=This is a bold text,, width=800,,height=600] “>DEMO

Đây là ví dụ mà tôi đã viết và áp dụng trên website http://yenthai.vn :: Thảm trải sàn

Bạn thực hiện theo các bước dưới đây:

Bước 1: Dowload thư viện GMaps.dll tại http://googlemaps.subgurim.net/, giải nén và Add GMaps.dll vào thư mục Bin trong ứng dụng của bạn

Bước 2: Add GMaps.dll vào Toolbox trong VS của bạn (thực hiện bước này để bạn kéo thả khi lập trình cho dễ)

Chọn Tool Box -> Phải chuột vào General Tab -> chọn Add New Tab đặt tên Tab là GoogleMap -> Phải chuột vàoGoogleMap chọn Browse.. chọn đến nơi lưu GMaps.dll -> OK.

Bước 3: Thiết kế Form

Bước này minh họa thiết kế 1 Form đơn giản để người dùng nhập các thông tin cần search

<table>
    <tr>
        <td colspan="2">
            </td>
        <td rowspan="5">
            <cc1:GMap ID="GMap1" runat="server" Height="600px" Width="800px" />
        </td>
    </tr>
    <tr>
        <td>
            Street</td>
        <td>
            <asp:TextBox ID="txtStreet" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            City</td>
        <td>
            <asp:TextBox ID="txtCity" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            Country</td>
        <td>
            <asp:TextBox ID="txtCountry" runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button ID="btnShowMap" runat="server" onclick="btnShowMap_Click"
                Text="ShowMap" />
        </td>
    </tr>
</table>

Chú ý bạn cần đăng ký dùng assembly của Gmaps.dll bạn cần đăng ký dòng code sau trong trang aspx (Nếu bạn kéo thả từ Toolbox như hướng dẫn bước 2 thì dòng code này sẽ tự sinh cho bạn)

<%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>

Với cc1:GMap bạn có thể thêm các thuộc tính như  enableContinuousZoom=”true” cho phép zoom kết quả search, enableGoogleBar=”true” – hiển thị GoogleBar, …

Bước 4: Viết code. Khi người dùng nhập các thông tin rồi nhấn ShowMap khi đó Google Maps sẽ hiển thị thông tin, vị trí, đường đi của địa chỉ người dùng nhập (nếu có)

using System;
using System.Configuration;
using Subgurim.Controles;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnShowMap_Click(object sender, EventArgs e)
    {
        string fulladdress = string.Format("{0}.{1}.{2}", txtStreet.Text, txtCity.Text, txtCountry.Text);
        string skey = ConfigurationManager.AppSettings["googlemaps.subgurim.net"];
        GeoCode geocode;
        geocode = GMap1.getGeoCodeRequest(fulladdress);
        var glatlng = new  Subgurim.Controles.GLatLng(geocode.Placemark.coordinates.lat , geocode.Placemark.coordinates.lng);
        GMap1.setCenter(glatlng, 16, Subgurim.Controles.GMapType.GTypes.Normal);
        var oMarker = new Subgurim.Controles.GMarker(glatlng);
        GMap1.addGMarker(oMarker);
    }
}

Bước 5: Sửa web.config

Ở bước 4 khi viết code bạn dùng string skey = ConfigurationManager.AppSettings["googlemaps.subgurim.net"]; do đó bạn cần sửa trong web.config bằng cách thêm key=”googlemaps.Subgurim.net” bên trong thẻ appSettings như sau.

<appSettings>
    <add key="googlemaps.Subgurim.net" value="YourGoogleMapsAPIKeyHere"/>
</appSettings>

Nếu ở bước 4 bạn gán luôn string skey=YourGoogleMapsAPIKeyHere thì bạn không cần thực hiện bước 5.

Chú ý nếu bạn dùng code như đã hướng dẫn ở trên thì khi bạn thực hiện trên localhost sẽ chạy bình thường nhưng nếu bạn đưa lên host sẽ báo lỗi “This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/signup.html“.Vậy giá trị YourGoogleMapsAPIKeyHere được lấy từ đâu? bạn vào http://code.google.com/apis/maps/signup.html đăng nhập với tài khoản gmail và điền url website của bạn và nhấn Gennerate API Key để lấy Key và thay vào web.config ở bước 5

>> nguồn hmweb.com.vn