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:

View Code:

<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=[your 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ả .

View Code:

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

View Code:

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

View Code:

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

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

View Code:

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.

Link download source code mẫu: here.


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