1

Estou tentando adicionar uma legenda em meu mapa do googlemaps. Para montar a legenda eu criei um quadrado com a cor que representa um valor. 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 quadro da legenda:

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

JavaScript para adicionar a legneda ao mapa:

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);

O meu resultado é um quadro de legenda apenas com o texto,sem o quadrado ao lado. Imagino que a razão é por eu não ter um css para o texto ficar ao lado do quadrado.

Problema:

-Propriedade do css para colocar o texto a partir do quadrado. -No JS que passei a eu adiciono a div.classname="block",mas falta a div square,caso eu faça dois appendChild eu consigo adicionar as duas divs?

1 Resposta 1

0

Acredito que a melhor forma de você injetar o quadrado no seu elemento, seria usar um pseudoelemento no seu css. Ex:

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

Dessa forma a responsabilidade fica no css e você não precisar fazer via javascript, você pode até pensar fazer a legenda assim também, caso ele não seja mutável.

Onde o valor da "propriedade content" seria a string da legenda. Ex: #legend:after{content:'Aqui o texto da legenda';}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .