Google Maps - Cửa sổ Thông tin

Ngoài các điểm đánh dấu, đa giác, đường đa giác và các hình dạng hình học khác, chúng tôi cũng có thể vẽ Cửa sổ thông tin trên bản đồ. Chương này giải thích cách sử dụng Cửa sổ Thông tin.

Thêm một cửa sổ

Cửa sổ Thông tin được sử dụng để thêm bất kỳ loại thông tin nào vào bản đồ. Ví dụ: nếu bạn muốn cung cấp thông tin về một vị trí trên bản đồ, bạn có thể sử dụng cửa sổ thông tin. Thông thường, cửa sổ thông tin được gắn với một điểm đánh dấu. Bạn có thể đính kèm một cửa sổ thông tin bằng cách khởi tạogoogle.maps.InfoWindowlớp học. Nó có các thuộc tính sau:

Content - Bạn có thể chuyển nội dung của mình ở định dạng Chuỗi bằng cách sử dụng tùy chọn này.
position - Bạn có thể chọn vị trí của cửa sổ thông tin bằng cách sử dụng tùy chọn này.
maxWidth- Theo mặc định, chiều rộng của cửa sổ thông tin sẽ được kéo dài cho đến khi văn bản được bao bọc. Bằng cách chỉ định maxWidth, chúng ta có thể hạn chế kích thước của cửa sổ thông tin theo chiều ngang.

Thí dụ

Ví dụ sau đây cho thấy cách đặt điểm đánh dấu và chỉ định một cửa sổ thông tin phía trên nó -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Nó sẽ tạo ra kết quả sau: