在谷歌地图 api 中添加图层和样式

Question

I'm trying to make the transitLayer layer appear on a map with a style but it doesn't work. The transitLayer is visible on the normal map and on the satellite view but not on the map which has a style. Any ideas?

Bonus question: I would also like to indicate a legend above each of the 2 circles as on this site: https://www.vianavigo.com/en/nearby/result?center=2.494094045%3B48.89430279%7CAddress%7C213+rue + Edouard + Vaillant% 7C93140% 7CBondy% 7C611561.9084090972% 7C2432902.394653598 & e = 0 & filters = 111

<script>
      function initMap() {

    var styledMapType = new google.maps.StyledMapType(
        [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "simplified"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "landscape",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
], {
            name: 'Styled Map'
        });
          var bondy = {lat: 48.894362, lng: 2.494127};
    var map = new google.maps.Map(document.getElementById('map'), {
        center: bondy,
        zoom: 15,
        mapTypeControlOptions: {
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                'styled_map'
            ]
        }

    });

    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');

    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);
    transitLayer.setMap(styledMapType); 

          var circle = new google.maps.Circle({
            center: bondy,
            map: map,
            radius: 1000,          // IN METERS.
            fillColor: '#fcd18d',
            fillOpacity: 0.1,
            strokeColor: "#fcd18d",
            strokeWeight: 3,         // DON'T SHOW CIRCLE BORDER.

        });

          var circle = new google.maps.Circle({
            center: bondy,
            map: map,
            radius: 500,          // IN METERS.
            fillColor: '#fcd18d',
            fillOpacity: 0.4,
            strokeColor: "#fcd18d",
            strokeWeight: 3         // DON'T SHOW CIRCLE BORDER.
        });
          var marker = new google.maps.Marker({
          position: bondy,
          map: map,
        title: "Bondy - 213-215 rue Édouard Vaillant"

        });
}
    </script>

Answer 1

It will work when you remove the following style values since these style values are overriding the transitLayers on your map:

{
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  }

and

{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  }

As for the labels of your circle, there's no direct label parameter that you can use for circle objects. There are multiple ways that you can achieve this such as using a marker with transparent icon and a label, using infowindow and using custom Overlays. I used a marker with transparent icon and this is the code snippet and explanation on how I get it:

 var Circle1  = google.maps.geometry.spherical.computeOffset(center, 1000, 0);

        var invisibleMarker1 = new google.maps.Marker({
          position: Circle1,
          map: map,
          icon: "https://www.iconspng.com/uploads/transparent-background-pattern/transparent-background-pattern.png",
          label: "1000"

First, I need to get the coordinates of the topmost of the circle in the map. I got this by using the 'computeOffset' of the Geometry library. You also need to add this value( libraries=geometry) in the script where you are calling the APIs:

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

Once you get the coordinates, you can then use this as the coordinates of your marker where you use a transparent image as your 'icon' and your circle label as the 'label' of the marker. You can see the working fiddle here .

Hope this helps!