GOOGLE MAPS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Google Map Window - Display Marker Info Window

Đối tượng (Object) Info Window dùng để hiển thị một cửa sổ thông tin nằm trên bản đồ Google Map, nó thường được dùng để hiển thị thông tin của Marker. Tuy nhiên   ta có thể sử dụng nó để hiển thị thông tin tại một vị trí vĩ độ + kinh độ (latitude/longitude) nao đó trong bản đồ googme map. Từ đó ta tóm lại cửa sổ thông tin (info window) trong google map dùng để hiển thị một thông tin nào đó và nó được hiển thị ở mức z-index cao nhất, vì thế nó luôn nằm trên bản đồ nhằm giúp người dùng được được. Bạn vào link này để xem thêm các thuộc tính của nó nhé.

1. Thêm một cửa sổ thông tin ( Add an info window )

InfoWindow được khởi tạo bởi các thông số InfoWindowOptions gồm:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
  • content: nội dung muốn hiển thị, có thể sử dụng m.
  • pixelOffset: Vị trí các đỉnh của cửa sổ được neo, thông số này thường để mặc định
  • position: đối tượng LatLng gồm hai thông số tung độ và vỹ độ ()
  • maxWidth: Chiều rộng tối đa của cửa sổ và tính theo Pixel

Thông thường nếu bạn muốn nội dung content của Info Window rõ ràng thì bạn nên đặt nó bao ngoài bởi một thẻ DIV, và bên trong thẻ DIV bạn có thể đặt thêm các đoạn mã HTML khác. Như vậy giao diện cửa sổ thông báo nhìn sẽ đẹp và ít lỗi hơn.

Góp ý: Nếu bản đồ của bạn có quá nhiều cửa sổ thì lúc hiển thị ra nó sẽ chiếm không gian của bản đồ, vì thế các cửa sổ thông tin bạn nên ẩn nó đi rồi tạo các sự kiện khi click vào rồi mới hiển thị. Như vậy nhìn bản đồ sẽ rất thoáng, thay vì hiển thị một loạt các InfoWindow thì chỉ show các Control quản lý.

Ví dụ: Xem demo

 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Info windows</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
            #content{
                padding: 20px;
                color:red
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            function initialize() 
            {
                var myLatlng = new google.maps.LatLng(10.771971, 106.697845);
                
                var mapOptions = {
                    zoom: 12,
                    center: myLatlng
                };

                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                var infowindow = new google.maps.InfoWindow({
                    content: '<div id="content">Welcome to <a href="https://freetuts.net">freetuts.net</a> <br/> Đây là chợ bến thành</div>',
                    position : myLatlng
                });

                // Hàm Open dùng để mở window
                infowindow.open(map);
            }
            
            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

 

2. Mở một cửa sổ window ( Open an info window )

Ở phần Add an info window ta chỉ tìm hiểu  cách tạo một Object Info Window chứ chưa có hiển thị lên màn hình, dù trong ví dụ có hiển thị nhưng lúc đó chỉ là tạm thời chấp nhận hàm open đó :D. Nên trong phần này ta sẽ tìm hiểu cú pháp nó chi tiết hơn.

Cú phápinfowindow.open(map, control);

Trong đó:

  • map: là map sẽ hiển thị
  • control: gắn vào control nào, thường là Marker

Ví dụ: Trong ví dụ này khi click vào Marker sẽ hiển thị thông tin cửa sổ. Nếu bạn chưa biết sự kiện thì đọc bài Google Map Events.

Xem demo

 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Info windows</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
            #content{
                padding: 20px;
                color:red
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            function initialize() 
            {
                var myLatlng = new google.maps.LatLng(10.771971, 106.697845);
                
                var mapOptions = {
                    zoom: 12,
                    center: myLatlng
                };

                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                var infowindow = new google.maps.InfoWindow({
                    content: '<div id="content">Welcome to <a href="https://freetuts.net">freetuts.net</a> <br/> Đây là chợ bến thành</div>',
                    position : myLatlng
                });
                
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Hồ Chí Minh Việt Nam'
                });
                
                // Khi click vào Marker thì hiển thị
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }
            
            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

 

3. Tắt Cửa Sổ Window ( Close an info window )

Để tắt một cửa sổ InfoWindow thì ta dùng hàm Close().

Ví dụ: infowindow.close()

4. Thay đổi vị trí của window (Change position Info Window)

Để thay đổi vị trí của infowindow thì ta sẽ có hai cách:

  • Cách 1: dùng hàm setPosition() 
  • Cách 2: Dùng hàm open() để tạo mới một marker

Trong phần này tôi sẽ không đưa ra ví dụ vì thực sự nó cũng đơn giản, chỉ cần các bạn nắm phần 1,2 là mọi thứ ok cho phần 3,4 rồi.

5 Lời kết

Bài này tôi thấy cũng hấp dẫn không kém bài Marker. Và ở những bài tiếp theo sẽ không kém phần như bài này nên các bạn theo dõi nhé :D

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top