Google maps en blanco y negro – #minientrada

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>
//funcion
function 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:

2 comments

    1. 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
      }]
      }];

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.