Insert square in caption googlemaps

Question

I’m trying to add a caption to my googlemaps map. To assemble the legend I created a square with the color that represents a value. css:

.square{
    width: 48%;
    height: 0;              /* Quadrado */
    padding-bottom: 48%; 
    margin: 1%;
    float: left;
    position: relative;
}
.block{
  position: absolute;
  text-align: center;                  /* Colorido*/
  background: #00FFFF;
  width: 3%;
  height: 3%;
}

css framework of the legend:

 #legend {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 3px solid #000;
      }

Javascript to add legneda to map:

var legend = document.getElementById('legend');
          var div = document.createElement('div');
          div.className ="block";
          div.innerHTML = 'Valor do quadrado';
          legend.appendChild(div);
        gmap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

My result is a caption frame with only the text, without the square next to it. I imagine the reason is because I don’t have a css for the text to be next to the square.

Problem:

-css property to place text from the square. -In the JS I went to I add the div.classname="block",but it lacks the div square, in case I make two appendchild I can add the two Divs?

Answer 1

I believe the best way for you to inject the square into your element would be to use a pseudo-element in his css. Ex:

#legend:before{
content:'';
position:relative;
left:0;
display:inline-block;
width:48%;height:0;  
}

This way the responsibility is in css and you do not need to do it via javascript, you may even think to do the caption as well, if it is not changeable.

Where the value of "content property" would be the string of the legend. Ex: #legend:after{content:'Aqui o texto da legenda';}