Can I use an image or CSS gradient to fill the waters in Google Maps?

Question

I am currently working on some project and should implement the next project on a Google map.

I could not find the answer to this question in the Google Maps help system - https://developers.google.com/maps/documentation/javascript/style-reference

So I'm wondreing - is it even possible (using only the API)?

Or do you need some hack? I thought, for example, about making the water areas transparent and placing the dotted image behind the map.

Thanks in advance!

Answer 1

In this answer, I will talk about disabling the visibility of the geometry of water on the map and setting the background color on the map.

First, as indicated in the previous answer, you must turn off the visibility of the map. You can consult google 's documentation on styles, 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 your map that you want, firstly, to turn off the visibility of water + land and, secondly, turn "on" the visibility of the earth.

 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> 

---

Secondly, you need to remove the default background color on the map (gray). This question has already been answered in Stack Overflow . You can simply use the mapOptions parameter of your map using the code below:

 backgroundColor: 'none' 

What gives:

 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. The gradient color is behind the map, the default background color of the map is removed and the water visibility is turned 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> 

Please note that this result is inspired by two posts. The first is the answer above, and the second is Roman's answer at this address in the Stack Overflow .

Answer 2

Note. If you have another answer that is expanding 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 the supported color formats, I don’t think it's just to get the desired result.

I have two examples below.

For some reason, I need to click a snippet script more than once (5-6 times) so that it works correctly. (Why?)

1 - Using a regular RGB color value in hexadecimal to control water color, but without 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 - Disabling visibility for water geometry - this does not work, because there is a solid default color behind all map 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 completely remove / change the default background, but this way over my head.

here is what i know so far:

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

For more information, see the Google Maps Strike JavaScript API API Reference >

Nothing...

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

Also ... as I see it, the fix involves two steps:

• turn off visibility for water geometry.
• somehow change / remove the default background, which is under all elements of the map

Hope this brings you closer to a working fix.

---

Finally - and this is for reference only -

Google has a very handy tool to help you create style maps. It accepts all the assumptions from the equation for a "normal" map display.

You can play with it here: Google Map Style Tool