What did I do wrong that the caption does not position correctly?

Good morning .. The code below shows a caption in google maps, but the caption is appearing at the bottom of the map, not positioning itself according to the statement: (map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (legend);) . I've already changed the above statement to multiple locations, but the caption does not position itself where it should.

                 Google Maps     

  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 70%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
  }
  #legend h3 {
    margin-top: 0;
  }
  #legend img {
    vertical-align: middle;
  }
</style>

Legend

// adiciona label aos icons
  var customIco = {
    'Marinha do Brasil': {
      name: 'Marinha do Brasil',
      icon: 'icons/ma.png'
    },
    'Exército Brasileiro': {
     name: 'Exército Brasileiro',
     icon: 'icons/eb.png'
    },
    'Aeronáutica': {
     name: 'Aeronáutica',
     icon: 'icons/ae.png'
    },
    'Civil': {
       name: 'Civil',
       icon: 'icons/ou.png'
    }

  };


    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-1.3858247,-48.4230076), //-1.4631397,-48.4927586  -1.4040091,-48.4332126
      zoom: 12
      //mapTypeId: 'roadmap'
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      //downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
        downloadUrl('map_conecta.php', function(data) {  
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customIco[type] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });       
        });
      });
    }

  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);

    //insere a legenda
     var legend = document.getElementById('legend');
    for (var key in customIco) 
    {
      var type = customIco[key];
      var name = type.name;
      var icon = type.icon;
      var div = document.createElement('div');
      div.innerHTML = '<img src="' + icon + '"> ' + name;
      legend.appendChild(div);
    }

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    //map.controls[google.maps.ControlPosition.RIGHT_TOP].push(document.getElementById('legend'));

  }

  function doNothing() {}

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap">
</script>