Estos últimos días he estado trabajando mucho en una página de marketing, y siempre trabajar con diseñadores es algo tedioso, pero dentro de lo que nos pidieron fue que aparezca google maps en blanco y negro, ahora quiero compartir cómo se hace.
HTML:
<div id=»map»></div>
CSS:
#map {width: 100%;height: 50vh;margin-top: 5vh;margin-bottom: 1vh;border: 0;}
vh es una medida virtual, que se crea apartir de las medidas de la pantalla que se visualice, 50vh es aproximadamente 50% de la pantalla.
javascript:
//llave<script async defer src=»https://maps.googleapis.com/maps/api/js?key=llavegoogle&callback=initMap»></script>//funcionfunction initMap() {var uluru = {lat: 40.718338,lng: -73.988157};var map = new google.maps.Map(document.getElementById(‘map’), {zoom: 17,center: uluru,mapTypeId: google.maps.MapTypeId.ROADMAP});
var marker = new google.maps.Marker({position: uluru,map: map,icon: ‘./assets/iconmap.png’});//marker.setAnimation(google.maps.Animation.BOUNCE);}
para cambiar el puntero en google maps, en la creación del market, agregamos la variable icon y enseguida donde está nuestra imagen
ahora para hacer en blanco y negro agregamos unas variables para que lo reconozca la api de google map
var colores = [{featureType: «all»,elementType: «all»,stylers: [{saturation: -100}]}];
y debajo de nuestra variable map aplicamos el estilo creado arriba
var estilo = new google.maps.StyledMapType(colores);map.mapTypes.set(‘mapa-bn’, estilo);map.setMapTypeId(‘mapa-bn’);
el resultado es el siguiente:
no me funciono con css!
Todo se hace con las variables de google maps
blanco y negro agregamos unas variables para que lo reconozca la api de google map
var colores = [{
featureType: “all”,
elementType: “all”,
stylers: [{
saturation: -100
}]
}];