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

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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:

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

Bài viết này được đăng tại [free tuts .net]

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áp: infowindow.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

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Google Map Window - Display Marker Info Window

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

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

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

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

5 Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Google Map Window - Display Marker Info Window

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

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

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

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

5 Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

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

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 insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript