Google maps api v3 sokak görünümü için nasıl özel bir kapatma düğmesi yaparım? Nasıl kapat düğmesini görüntülemek sokak kişiselleştirebilirim</p> <p><img src="https://i.stack.imgur.com/jpIoh.png" alt="Street view close button"></p> <p>:

Question

google haritaları API sokak görünümü modunda bu korkunç küçük kapatma düğmesi özelleştirmek için çalışıyorum?

Answer 1

Referans

Ben bir sokak harita görünümü içine dom nesnesi itmek nasıl açıklayan google gruplarında this reference bulundu.

Özel Javascript Kod

Sonra bazı özel kodlama yaptım ve bu ile geldi budur:

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

İşte jsbin (ipucu: haritanın üzerine sokak görünümü adamı damla) üzerinde full demo.