Wie die Infofenster Hintergrundfarbe ändern

Question

ich vor dem Problem, mein Google Map API Standard zeigt Infofenster mit Hintergrundfarbe white.I die weiße Farbe zu Schwarz Farbe ändern möchten. REF CODE:

google.maps.event.addListener(marker, 'mouseover', function() { 


    infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
       //infoWindow.setStyle("background-color: red"); 


     }); 

Answer 1

kam ich mit einer einfachen Lösung auf. Dies ist vielleicht keine sehr elegante Lösung, aber es funktioniert gut, wenn Sie nicht große Styling-Bedürfnisse haben.

Da wir unsere eigenen HTML und Stil hinzufügen können. Das Marker-Hintergrundelement ist hauptsächlich dasjenige, das ein Problem verursacht. Für einfaches Styling können wir, anstatt eine komplett neue Bibliothek zu lernen, dieses Element einfach mit jQuery entfernen.

Fügen Sie diesen Code in Ihre init-Funktion ein und das Hintergrundelement wird entfernt.

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    jQuery('.gm-style-iw').prev('div').remove(); 
}); 

Jetzt können Sie Ihre eigenen divs stylen. Ich habe das InfoWindow in meinem Projekt mit diesem Ansatz gestaltet.

Hoffe, es hilft.

Answer 2

Sie können die InfoBox hier in Google Maps Utility.

Diese Klasse verhält sich wie google.maps.InfoWindow, aber es unterstützt mehrere zusätzliche Eigenschaften für erweiterte Styling. Eine InfoBox kann auch als Kartenlabel verwendet werden.

Sie können auch CSS verwenden, um es zu stylen. Diese tutorial und this Durch die Überprüfung, wird es geben Ihnen einen Beispielcode, wie es zu tun.