Is it possible to use an image or a CSS gradient for filling of water areas in Google Maps?

Question

I'm currently working on some project and need to implement the next design to a Google Map.

I didn't manage to find any clue to answering of this question in Google Maps style reference - https://developers.google.com/maps/documentation/javascript/style-reference

So, I'm wondreing - is it possible at all (using only API)?

Or some hack is needed? I've thought, for example, about making of water areas transparent and placing the dotted image behind the map.

Thanks in advance!

Answer 1

In this answer, I will treat about turning off the visibility for water geometry on the map and to set background color behind the map.

First, as precised in the previous answer, you have to turn off the visibility of the map. You can consult the google documentation about stylers but the code is very simple:

styles: [{
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]

Here you declare in the mapOptions of your map that you want, first, to turn off the visibility of the water + the land and, in second, to turn "on" the visibility of the land.

function initialize() {
          var mapOptions = {
		          zoom: 2,
              center: new google.maps.LatLng(43.27749, -92.658775),
              styles: [{
                  "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "featureType": "landscape.natural.landcover",
                      "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "on"
                  }]
              }]
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
      }

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

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" style="height:300px;"></div>

---

Second, you have to remove the default background color of the map (in gray). This question was already answered in Stack Overflow. You can simply use the parameter mapOptions of your map with the code below:

backgroundColor: 'none'

Which give:

var mapOptions = {
              backgroundColor: 'none',
          zoom: 2,
          center: new google.maps.LatLng(43.27749, -92.658775),
          styles: [{
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]
      };
      map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

A simple example:

function initialize() {
          var mapOptions = {
		          backgroundColor: 'none',
              zoom: 2,
              center: new google.maps.LatLng(43.27749, -92.658775),
              styles: [{
                  "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "featureType": "landscape.natural.landcover",
                      "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "on"
                  }]
              }]
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
      }

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

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" style="height:300px;"></div>

Finally, the code snippet below is a very simple example of this. There is a gradient color behind the map, the default background color of the map is removed and the visibility of the water is turn off.

 function initialize() {
          var mapOptions = {
		          backgroundColor: 'none',
              zoom: 2,
              center: new google.maps.LatLng(43.27749, -92.658775),
              styles: [{
                  "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "featureType": "landscape.natural.landcover",
                      "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "on"
                  }]
              }]
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
      }

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

.gradient {
    height: 200px;
    background: -webkit-repeating-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(white, blue); /* Standard syntax (must be last) */
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" class="gradient" style="height:300px;"></div>

Note that this result is inspired of two posts. The first is the answer above and the second is the answer of Roman in this address in Stack Overflow.

Answer 2

Note: if you have an a different answer that expands on mine, please feel free to copy any part of this answer.

---

As far as I know, there is no support for rgba colors. Since there is no alpha manipulation with supported color formats, I don't think it's straightforward to get the desired result.

I have two examples below.

For some reason I have to click run snippet more than once (5-6 times) in order for it to run properly. (why?)

1- Using a regular RGB color value in hex format to manipulate the color of water - works but no transparency

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 40.674,
        lng: -73.945
      },
      zoom: 12,
      styles: [{
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
          color: '#ff99cc'
        }],
      }]
    })
  }

#map {
  height: 100%;
  width: 100%;
}

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

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

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

2- Turning off the visibility for water geometry - it doesn't work becuase there's a default solid color background behind all the of map's objects.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 12,
    styles: [{
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{
        visibility: "off"
      }],
    }]
  })
}

#map {
  height: 100%;
  width: 100%;
}

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

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

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

You may be able to modify the script to remove / change the default background completely but that's way over my head.

here's what I know so far:

the variable(?) for that color is called backgroundColor and it falls under google.maps.MapOptions google's definition of that variable:

You can read more about this in Google Maps JavaScript API V3 Reference

Never mind...

the variable above only controls the background color before the tiles load. I found that out in this tutorial for anyone interested.

Still...the way I see it, the fix involves two steps:

1. turn off visibility for water geometry
2. somehow modify / remove the default background that's under all of the map elements

I hope this brings you closer to a working fix.

---

Finally - and this is for reference only -

google has a very handy tool to help with styling maps. It takes all the guesswork out of the equation for "normal" map styling.

You can play around with it here: Google map style tool