Colored Infobox

Colored infobox.js

var boxText = document.createElement("div");
var myOptions = {
    content: boxText,
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-175, -20),
    boxStyle: {
        opacity: 1,
        width: "350px"
    },
    closeBoxMargin: "10px 10px 2px 2px",
    closeBoxURL: siteImgUrl + "ico_close.svg?refresh=true",
    infoBoxClearance: new google.maps.Size(1, 1),
    pane: "floatPane",
    enableEventPropagation: false,
    alignBottom: true
};
// Add a dynamic class ('myColoredClass') based on category
boxText.innerHTML = '<div class="infobox {myColoredClass}"><h3>' + locations[i].title + '</h3>' + locations[i].address + '</p><a href="' + locations[i].yelp_link + '" target="_blank">'+ url_text +'</a></div>';
gmarkers.push(marker);
gmarkers[i].infobox = new InfoBox(myOptions);

/* CSS */
.myColoredClass {
    background-color: yellow;
}
/* small bottom arrow */
.myColoredClass:after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid yellow;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    
}