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 🤘