Google Maps: Shape below road layer?

by andriika

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Google Maps: Shape below road layer</title>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly" defer></script>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 17,
    center: {
      lat: 34.04,
      lng: -118.30
    },
    styles: [{
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      },
      {
        featureType: 'road',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      },
      {
        featureType: 'transit',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      },
    ]
  });

  const line = new google.maps.Polyline({
    path: [{
        lat: 34.039,
        lng: -118.299
      },
      {
        lat: 34.041,
        lng: -118.301
      },
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 5,
  });
  line.setMap(map);

  map.data.add({
    geometry: new google.maps.Data.LineString([{
        lat: 34.039,
        lng: -118.299
      },
      {
        lat: 34.041,
        lng: -118.301
      }
    ]),
  });

}