Google mapea polígonos extraños en el paisaje cuando la visibilidad del agua está apagada
Estoy tratando de hacer que el fondo del agua del mapa de google sea transparente para que muestre el fondo de la página web. Sin embargo, cuando apago la visibilidad del agua, partes del paisaje de África, Europa y Groenlandia se rodean de extraños polígonos.
Aquí hay un enlace JS Fiddle que funciona para el problema.
https://jsfiddle.net/kgo81ec8/1/
A continuación se muestra el mismo código para reproducir el problema.
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
body{
background-color:black;
}
#map{
height:100%;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
testMe = function () {
var styles = [{
"elementType": "water",
"stylers": [{
"visibility": "off",
}]
}, {
"featureType": "landscape.natural.landcover",
"stylers": [{
"visibility": "on"
}]
}];
var mapOptions = {
zoom : 1,
center : new google.maps.LatLng(40, -3),
styles : styles,
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.LARGE,
position : google.maps.ControlPosition.TOP_LEFT
},
backgroundColor:"blue"
};
new google.maps.Map(document.getElementById('map'), mapOptions);
}
testMe();
</script>
</body>
</html>
A continuación se muestra una captura de pantalla de la salida.
Aquí hay un enlace para probar los estilos de Google Maps en línea.http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html
Cualquier ayuda es apreciada, he estado trabajando en este simple problema durante horas.