[GIS] Google Maps API v3 base map visibility

google mapsgoogle-maps-api

Is it possible to change visibility or opacity of google base map ?
I am adding it like in simple example, and adding data layer as overlay and want to see only vector markers. Is it possible?

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

Best Answer

To add transparency to your code you would have to modify your example like this:

var map;
var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

var options = [{
    stylers: [{lightness:90}]
 }];


 var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
   },
   mapTypeId: MY_MAPTYPE_ID};

  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

   var styledMapOptions = {
       name: 'Custom Style'
     };   

   var customMapType = new google.maps.StyledMapType(options, styledMapOptions);  

   map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

   }

   google.maps.event.addDomListener(window, 'load', initialize);

In this case the basemap would take a 90% transparency (referred to in the code as lightness).

The following links can be very useful when styling maps: Styled Maps and an example.

Please let me know if the code makes sense to you, or if you need further explanation.

Related Question