Google Maps API trong JavaScript, Ai giúp em với

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

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

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

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