Greetings to all the brilliant minds on Stackoverflow!
Just like many others seeking customization for InfoWindow, I am also on a quest to make it happen.
Please note: Due to technical constraints, using infobubble and infobox is not an option for me!
During my search, I stumbled upon a rather rigid solution through this helpful guide: (I hope the link remains active; you can download an example by clicking the download button next to the demo button)
This method involves "removing" the outer content of the infowindowcontent, which aligns with my goal. However, it has a downside - whenever I click on my markers and the infowindow appears, it applies the same styling to ALL OTHER INFOWINDOWS on the map.
function customizeInfoWindow(infowindow) {
google.maps.event.addListener(infowindow, 'domready', function () {
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({ 'display': 'none' }); // Removes BoxShadow
iwBackground.children(':nth-child(4)').css({ 'display': 'none' }); // Removes WhiteBox
});
}
Despite its drawbacks, this approach seems to be the only viable way to eliminate the outer content from my InfoWindow. Therefore, I have decided to stick with this method for now. While it achieved the desired customization, unwanted features accompanied this "fix."
Currently, I am attempting to rectify this by restoring the styling when I close the infowindow (by clicking elsewhere on the map). My attempted solution looks something like this:
function undoCustomization(map) {
google.maps.event.addListener(map, 'domready', function () {
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({ 'display': 'block' }); // Add BoxShadow
iwBackground.children(':nth-child(4)').css({ 'display': 'block' }); // Add WhiteBox
});
}
Unfortunately, this approach doesn't seem to be working as intended. Does anyone have any advice on how I can proceed from here?