Crear un mapa de google maps personalizando los colores, en este caso en escala de grises es muy sencillo aplicando el filtro de saturación a -100.
Hay que crear y definir el objeto StyledMapType (Este método cambia el estilo de los tipos de mapa estándar).
Este sería el código nuevo que tendrías que insertar a tu script, adaptando el nombre de las variables a las que tengas:
var colores = [
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 }
]
}
];
var estilo = new google.maps.StyledMapType(colores);
mapa.mapTypes.set('mapa-bn', estilo);
mapa.setMapTypeId('mapa-bn');
A continuación un ejemplo con el código «js completo» de mapa en blanco y negro con un marcador:
function initialize() {
var coordenadas = new google.maps.LatLng(42.6036087464434, -5.577391300000045);
var colores = [
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 }
]
}
];
var opciones = {
zoom: 16,
center: coordenadas,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapa = new google.maps.Map(document.getElementById('mi-mapa'), opciones);
var estilo = new google.maps.StyledMapType(colores);
mapa.mapTypes.set('mapa-bn', estilo);
mapa.setMapTypeId('mapa-bn');
var marcador = new google.maps.Marker({
position: coordenadas,
map: mapa
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Y el html:
<div id="mi-mapa" style="height:300px"></div>
Y recordar cargar en el «head» de vuestra web la librería:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Demo:
Agradezco tu comentario 🤘