Cách nhúng Google Maps vào website asp.net

Google Maps là một ứng dụng không còn xa lạ gì đối với mọi người. Đây là ứng dụng được sử dụng phổ biến và rộng rãi nhất hiện nay trong việc chỉ đường. Bởi sự tiện lợi và tầm ảnh hướng của nó, rất nhiều doanh nghiệp đã yêu cầu được hiển thị địa điểm kinh doanh của mình trên bản đồ của Google Maps để người dùng có thể biết đến và mua hàng nhiều hơn. Vậy làm cách nào để nhúng Google Maps vào website Asp.net? Trong bài viết này, VieDigi.vn sẽ hướng dẫn cho bạn, theo dõi ngay thôi nào!

Website Asp.net là gì?

Asp.net được viết đầy đủ là Active Server Pages, còn Net là từ viết tắt của Network Enabled Technologies.

Asp.net là một nền tảng phát triển website, được Microsoft cung cấp và phát hành lần đầu tiên vào năm 2002. Nền tảng này được sử dụng nhằm tạo ra các ứng dụng web-based.

Phiên bản Asp.net đầu tiên được phát hành là 1.0 và phiên bản Asp.net mới nhất là 4.6. Nền tảng Asp.net được thiết kế ra để tương thích với giao thức HTTP. Đây là một giao thức chuẩn được sử dụng trên mọi ứng dụng website.

Xem thêm: TOP 7 trang web làm nhạc kỹ thuật số tốt nhất

Ứng dụng Asp.net có thể được viết bằng các ngôn ngữ .net khác nhau. Trong đó, một số ngôn ngữ có thể kể đến như: C #, J # và VB.net. hiểu được phần này để ta nhung google maps vào website asp.net cho đúng

Cấu trúc, thành phần của Asp.net

Cấu trúc của .Net framework gồm các thành phần cơ bản sau:

1. Language/ Ngôn ngữ: Trong .Net framework tồn tại rất nhiều ngôn ngữ lập trình khác nhau. Các ngôn ngữ này có thể là VB.Net hoặc C # dùng để phát triển các ứng dụng website.

2. Library/ Thư viện: .Net framework gồm một bộ các lớp library chuẩn. Library được sử dụng phổ biến cho các ứng dụng web trong .Net là Web library. Trong Web library bao gồm các thành phần cần thiết để sử dụng trong các ứng dụng web-based.

3. Common Language Runtime/ Thời gian chạy ngôn ngữ lập trình thông thường (CLR): Common Language Infrastructure được dịch là Cơ sở hạ tầng ngôn ngữ lập trình phổ thông (CLI). Đây là một nền tảng được sử dụng để chạy các chương trình .Net. Trong đó, CLR có nhiệm vụ thực hiện những tác vụ chính bao gồm xử lý các trường hợp cá biệt và thu gom rác.

Tại sao cần nhúng Google Maps vào website Asp.net?

• Google Maps được ứng dụng vào SEO địa điểm doanh nghiệp, nhằm tăng tương tác, tăng lượng khách hàng truy cập vào web, kéo traffic cho web và tăng doanh thu cho doanh nghiệp.
• Nhúng Google Maps vào website Asp.net để hiển thị vị trí của doanh nghiệp, giúp khách hàng dễ dàng định vị được địa chỉ của doanh nghiệp đó một cách nhanh nhất khi họ truy cập website.
• Đây là cách ghi chú trực quan nhất về địa điểm, đảm bảo các tính năng của một trang liên hệ.

Cách nhúng Google Maps vào website Asp.net

Bước 1: Tạo một project Asp.net MVC trên Visual Studio. Ở đây VieDigi.vn sử dụng MVC 2 và VS 2010. Trong ứng dụng sắp tạo dưới đây, chúng tôi sử dụng Google Maps API v2.

Bước 2: Sau khi tạo project, hãy mở trang Index.aspx và thêm vào đoạn mã sau:

<asp:Content ID="indexHead" ContentPlaceHolderID="HeadContent" runat="server">

    <script type="text/javascript" src="http://www.google.com/jsapi?key=[your key]"></script>

Ở đoạn mã trên, có 1 điểm cần lưu ý là http://www.google.com/jsapi?key=[your key] Khi publish web lên 1 host nào đó, bạn cần đăng ký key này của Google Maps để có thể truy cập được Maps API của Google. Để đăng ký key, hãy vào địa chỉ này và điền vào domain web của bạn, rồi sau đó generate key.

Bước 3: Sau đây là đoạn mã javascript để có thể load Google Maps vào trong website của bạn. Những đoạn mã javascript cần thiết Google đã cung cấp sẵn cho chúng ta, vì thế hãy làm sao cho thật hiệu quả.

<script type="text/javascript">
        var allMarks = [];
        google.load("maps", "2");

        //This function will help us to add the mark at
        //location where user has double clicked. Then
        //we will add all the marks in our array so that
        //we can send it back to the controller
        function initialize() {
            var map = new google.maps.Map2(document.getElementById("map"));
            map.setCenter(new google.maps.LatLng(10.7591800, 106.6624980), 13);
            map.setUIToDefault();
            GEvent.addListener(map, "dblclick", function(overlay, latlng) {
                if (latlng) {
                    var mark = new GMarker(latlng);
                    allMarks.push(latlng);
                    map.addOverlay(mark);
                }
            });

        }
        google.setOnLoadCallback(initialize);

Bước 4: Mã javascript bên dưới được sử dụng để chuyển dữ liệu đến controller. Tại đây, chúng ta cần tạo ra một đối tượng Google Maps để lưu dữ liệu.

 //This function will be called for saving the mark
        //for that it will send the data back to the controller
        function saveMap() {

            //gmap object with all values of the map mark
            var gmap = {
                Locations: allMarks,
                Description: Description.value
            }

            //Ajax call for saving the data at the server. It will send the gmap
            //object tot the server
            $.ajax({
                type: "POST",
                url: "/Home/Create",
                data: gmap
            });

Bước 5: Sau khi hoàn tất những bước trên, chúng ta sẽ tiếp tục xử lý trong lớp HomeController, cụ thể là ở trong hàm Create.

public ActionResult Create(GMap gmap)
{
        Session["MapData"] = gmap;
        return View();
}

Bước 6: Kiểu Google Maps chúng ta dùng sẽ có dạng như sau:

public class GMap
{
    public object[] Locations { get; set; }
    public string Description { get; set; }
}

Như vậy là bạn đã hoàn tất việc nhúng Google Maps vào website Asp.net. Dưới đây là screenshot của ứng dụng khi chạy trên Asp.net.

Qua bài viết mà VieDigi.vn đã chia sẻ ở trên, hy vọng bạn đã có thêm nhiều thông tin về Asp.net và biết cách nhúng Google Maps vào website Asp.net. Hãy bắt tay vào thực hành và cho chúng tôi biết kết quả nhé! Nếu bạn cần về dịch vụ chăm sóc và quản trị website, đừng ngần ngại liên hệ ngay với VieDigi.vn qua sđt 0988.759.377 nhé.