Integrating Google Map API Into ASP.NET MVC App

Trong bài này, mình sẽ trình bày cách đưa Google Map vào trong ứng dụng ASP.NET MVC của các bạn.

Đầu tiên, các bạn tạo một project ASP.NET MVC trong Visual Studio, ở đây mình sử dụng MVC 2 và VS 2010. Trong ứng dụng mình sắp tạo dưới đây, mình sử dụng Google Map API v2 (tham khảo tài liệu về nó tại đây). Trong link tham khảo, nó chứa tất cả thông tin, code javascript mẫu mà bạn có thể sử dụng.

Sau khi tạo project, mở trang Index.aspx, bạn thêm vào mã sau:

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

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

Trong đoạn mã trên, có 1 chỗ chúng ta cần lưu ý, đó là http://www.google.com/jsapi?key=%5Byour key]. Khi bạn publish website lên 1 host nào đó, bạn cần đăng kí key này từ Google Map để bạn có thể truy cập Map API của Google. Để đăng kí key, rất đơn giản, bạn chỉ việc vào địa chỉ sau vào điền vào domain website của bạn, sau đó generate key.

Dưới đây là đoạn mã javascript để load Google Map vào trang web của bạn. Đoạn mã tương tự có trong link tài liệu Google Map API mà mình đã đưa lúc đầu. Những đoạn mã javascript cần thiết Google đã cung cấp cho chúng ta, việc chúng ta cần làm là sử dụng chúng sao cho có hiệu quả Smile.

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

Đoạn javascript dưới đây được dùng để chuyển dữ liệu đến controller. Ở đây chúng ta sẽ tạo ra một đối tượng GMap để 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
            });

Sau khi đã hoàn tất những gì cần thiết trên View, bây giờ chúng ta sẽ thực hiện xử lý trong lớp HomeController, cụ thể là trong hàm Create.

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

Kiểu GMap mà chúng ta dùng có dạng như sau:

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

Như vậy công việc của chúng ta đã hoàn tất. Dưới đây là screenshot của ứng dụng khi chạy trên trình duyệt.

googlemap_mvc

 

Link download source code mẫu: here.

Chúc các bạn thành công Smile! Web is beautiful.

P/s: Bài viết này có tham khảo blog Toward Next.

4 thoughts on “Integrating Google Map API Into ASP.NET MVC App

    • Thay vì bạn để code cứng phần điểm bạn muốn đặt trên Google Map, bạn có thể thay nó bằng một biến nào đó, khi người dùng submit point thì nó sẽ gán các giá trị vào biến đó và set lại google map.

  1. cảm ơn bạn rất rất nhiều
    cho mình hỏi thêm?
    – mình muốn cho user nhập 1 điểm A và điểm B rùi nhấn nút submit
    – khi đó google map sẽ tìm từ điểm A đến điểm B vậy phải làm sao
    rất mong bạn giúp mình

    • Google Map API cung cấp cho bạn tập các hàm xử lý trong đó, nó hỗ trợ cả việc tìm đường, do đó công việc của bạn cũng “nhẹ nhàng” là tìm phần API thực hiện việc xử lý đó là ok. Tùy vào các phiên bản Google Map mà API cung cấp có thể khác nhau.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s