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.