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?