Cần giúp đỡ về Google Maps API trong JavaScript

#1

Em có đoạn code sử dụng JavaScript này :
Nhiệm vụ của em nó là hiển thị 1 địa điểm ( marker ) lên Map
Nhưng em không biết làm thế nào để TẠO 1 HÀM addMArker(lat,lng) mà hàm này có thể chạy sau khi hàm init kia chạy xong. Kiểu như là add Marker sau khi Map đã được load khi khởi tạo ấy ạ. Ai giúp em :frowning:

Screenshot (43).png1360×768 91.9 KB

#2

Chào bạn,
Mình xin chia sẻ 1 đoặn code mình viết trên asp.net để hiển thị địa điểm tự động lấy từ Database ra như sau:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
             {
                 "title": '<%# Eval("StoreName") %>',
             "lat": '<%# Eval("Latitue") %>',
             "lng": '<%# Eval("LongLatitue") %>',
             "description": '<%# Eval("Address") %>',
                 "storeid": '<%# Eval("ID") %>',
                 "storename": '<%# Eval("StoreName") %>'
         }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">

    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("jyskmap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent('<h3 class="field-content">' + data.storename +'</h3>' + '<div class="field-content">' + data.description + '</div>');
                    infoWindow.open(map, marker);                        
                });
            })(marker, data);
        }
    } 
</script>

Ở đây mình dùng thư viện “maps.googleapis.com/maps/api/js” của google. với khai báo như trên.
Tiếp theo mình sử dụng một Repeater control có ID=rptMarkers để populate các markers được đọc từ DB ra.

<script type="text/javascript">
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
             {
                 "title": '<%# Eval("StoreName") %>',
             "lat": '<%# Eval("Latitue") %>',
             "lng": '<%# Eval("LongLatitue") %>',
             "description": '<%# Eval("Address") %>',
                 "storeid": '<%# Eval("ID") %>',
                 "storename": '<%# Eval("StoreName") %>'
         }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
];
</script>

Tiếp theo là viết hàm thực hiện việc hiển thị các marker lên bản đồ sau khi bind từ DB và hàm bắt sự kiện người dùng click vào marker:

<script type="text/javascript">
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("jyskmap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent('<h3 class="field-content">' + data.storename +'</h3>' + '<div class="field-content">' + data.description + '</div>');         
                    infoWindow.open(map, marker);                        
                });
            })(marker, data);
        }
    }  
</script>

Trong CodeBehind bạn cần bind dữ liệu vào Repeater (rptMarkers) trong hàm Page_Load, như code của mình có dạng như sau:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var store = StoreLocationBO.GetList(); //Đọc danh sách stores và bind vào Repeater.
        if (store != null)
        {
            rptMarkers.DataSource = store;
            rptMarkers.DataBind();
        } 
    }
}

Trên đây là toàn bộ code viết bắng asp.net để hiển thị địa điểm lấy từ DB lên web. Hy vọng sẽ giúp ích được cho bạn.
Thân!
Hồng Lâm

3 Likes
#4

Không hiểu sao đoặn này không post được nên chụp hình cho bạn chịu khó nhìn và viết lại nha :D!

code_sample.jpg806×540 61.1 KB

Xong đoặn này rồi mới tới đoặn script và codebehind mình viết ở trên.

Thân!
Hồng Lâm

1 Like
#5

Cảm ơn bạn rất nhiều :x :X

#6

@lamlh Bạn ơi cho mình hỏi với, Mình có nhu cầu thế này : đầu vào là kinh độ và vĩ độ, mình muốn nhúng frame google map HTML vào web thì có cách nào miễn phí không bạn? Mình thấy trong document bắt thanh toán (mình chỉ test thử API thôi chứ không có kinh doanh gì hết) Cảm ơn bạn

#7

Trang hướng dẫn của Google có một API Key được cấp quyền cho JSFiddle.
Bạn code trên JSFiddle rồi nhúng iframe vào web của mình.
Ví dụ: https://output.jsbin.com/woluvav/1

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?