Insert square in caption googlemaps

Question

Insert square in caption googlemaps

Navigation

#1 by (0 votes)

1

I'm trying to add a caption in my google mapmap. To mount the caption I created a square with the color representing 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 caption frame:

 #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 guess the reason is because I do not have a css for the text to be next to the square.

Problem:

- css property to put text from the square. I'm trying to add a div to a div, but I do not know how to do it.

javascript css google-maps

asked by anonymous 29.04.2015 / 21:02

1 answer

Error 500 when sending android object to web service Rest Logically help with a system that writes data to Excel columns

score 0 · Accepted Answer

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

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

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

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