Làm cách nào để tạo nút đóng tùy chỉnh cho chế độ xem phố trên bản đồ google api v3?

Question

Tôi đang cố gắng để tùy chỉnh mà nút đóng khủng khiếp nhỏ trong các bản đồ google api chế độ xem đường phố:

Làm thế nào để tùy chỉnh các đường phố nút đóng xem?

Answer 1

Reference

tôi thấy this reference trong nhóm google giải thích làm thế nào để thúc đẩy một đối tượng dom vào xem bản đồ đường phố.

Tuỳ Mã Javascript

Sau đó tôi đã làm một số mã hóa tùy chỉnh và đây là những gì tôi đã đưa ra:

window.addEventListener('DOMContentLoaded', function(e){ 

    // Get close button and insert it into streetView 
    // #button can be anyt dom element 
    var closeButton = document.querySelector('#button'), 
     controlPosition = google.maps.ControlPosition.RIGHT_TOP; 

    // Assumes map has been initiated 
    var streetView = map.getStreetView(); 

    // Hide useless and tiny default close button 
    streetView.setOptions({ enableCloseButton: false }); 

    // Add to street view 
    streetView.controls[ controlPosition ].push(closeButton); 

    // Listen for click event on custom button 
    // Can also be $(document).on('click') if using jQuery 
    google.maps.event.addDomListener(closeButton, 'click', function(){ 
     streetView.setVisible(false); 
    }); 

}); 

HTML

<button id="button" class="btn">&times;</button> 

CSS

.btn { 
    margin-right: 10px; 
    font-size: 2em; 
    padding: .2em .4em; 
    font-family: sans-serif; 
    background-color: white; 
} 

Demo

Heres full demo trên jsbin (gợi ý: thả các anh chàng nhìn ra đường phố lên bản đồ).