I am trying to change the colors of my map, but not sure how to do this.

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
		var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
			center: new google.maps.LatLng(52.409703, -1.974159),
			zoom: 10,
			mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
	}
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

In the map options object you declared above, it can have a property called .styles that can accept an array of values.

// declare mapStyles array
var mapStyles= [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

var mapOptions = {
	center: new google.maps.LatLng(52.409703, -1.974159),
	zoom: 10,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
        // insert the mapStyles array as a value to the styles property
        styles: mapStyles
};

Got from this article https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

Edited April 4, 201511 yr by rbrtsmith

Thanks buddy

We recommend this website to our web hosting members;

 

https://snazzymaps.com/

 

The website includes a bunch of free Google Maps styles and a neat Editor.

 

Rich