Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Google maps en blanco y negro jquery




imagen demo


ejemplo sencillo como podemos 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:

JS
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script>
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('map-3898'), 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);
</script>
<div id="map-3898" style="height:300px"></div>
                         
Cualquier duda comentar.
Editado
1
Puntos
0
Resp
1511
Visitas
Por pablo hace 27 meses
Experto offline

Relaccionados

Para comentar Inicia sesión o Registrate