Google Maps API, change text color

Question

I finished styling the map except one thing... I can't change the Streets' text color, I need help with this please:

window.onload=function initMap() {
    var c=new google.maps.LatLng(21.6845066, 39.1180914);
    var b= {
        zoom: 16, center: c, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: d, scrollwheel: false
    }
    ;
    map=new google.maps.Map(document.getElementById("map"), b);
    var a=new google.maps.Marker( {
		position: c, 
		map: map, 
		url: 'https://www.google.com.sa/maps/place/urbanphenomena/@21.568151,39.1630948,17z/data=!4m13!1m7!3m6!1s0x15c3d07221b828cf:0x1856c55812c88a1a!2surbanphenomena!3b1!8m2!3d21.5691139!4d39.1633416!3m4!1s0x15c3d07221b828cf:0x1856c55812c88a1a!8m2!3d21.5691139!4d39.1633416?hl=en&shorturl=1',
		title: "Click to open google maps", 
    }
    );
	
    var d=[
    {
        "featureType": "administrative",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "simplified"
            },
            {
                "color": "#ff0000"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels",
        "stylers": [
            {
                "color": "#fc0505"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "labels",
        "stylers": [
            {
                "color": "#ff0000"
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "labels",
        "stylers": [
            {
                "color": "#ff0000"
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "labels",
        "stylers": [
            {
                "color": "#ff0000"
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.land_parcel",
        "elementType": "labels",
        "stylers": [
            {
                "color": "#ff0000"
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#ffffff"
            },
            {
                "visibility": "on"
            }
        ]
    }
];
    map.setOptions( {
        styles: d
    }
    )
}

;

.map-container {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
}

.map-container #map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxwQNKD9zuR0uKXq90sbVLWdwEXOzoBeQ&callback=initMap"
  type="text/javascript"></script>

<!--- Contact section --->
    <div class="container-fluid section contact-section" id="section5">
      <div class="row">
        <div class="col-lg-7 col-lg-push-2">
          <div class="map-container">
            <div id="map"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-2 text-right col-lg-push-7">
          <span>Tel: </span>+966122345362<br><br>
          <span>Fax: </span>+966126949635<br><br>
          <span>Email: </span> <a href="mailto:info@mhs-arch.com">info@mhs-arch.com</a>
          <br><br>
          <span>Website: </span> <a href="http://www.mhs-arch.com" target="_self">http://www.mhs-arch.com</a>
        </div>
      </div>
    </div>

It changed the color of the land, water, street, and the heading text as well as the name of the neighborhood..How can I change the name of the streets?

Thank you!

Answer 1

So this will edit the text colour of the local roads (which is what you're after)

{
            "featureType": "administrative.locality",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#97ff00"
            }
        ]
    }

It's a bit of an odd hierarchy, and there can be conflict in overwriting styles. I recommend checking out the snazzy map editor for more information.

Answer 2

Road labels can be styled using the following object properties:

{
   featureType: 'road',
   elementType: 'labels.text.fill',
   stylers: [{color: '#9ca5b3'}]
}

Google maps are styled using an array of objects, each object contains properties that style an element on the map. This is a good reference for Google map styles: Start Styling your Map.

Another tip: you could also set the property elementType: 'labels.text.stroke' to add an outline around your text.