Mapa de Google Maps con apariencia/estilos personalizables vía JavaScript

Con el método «styles» de la API de Google podrás crear mapas totalmente personalizados modificando los estilos y aplicando composiciones de color propias.

1-Html (Mapa)

<div id="map"></div>

2-Javascript (Llamada y configuración)

    <script>
      function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.416720, lng: -3.703550},
          zoom: 5,
          styles: [
            {elementType: 'geometry', stylers: [{color: '#ffffff'}]}, //colosr paises
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, //borde paises ciudades
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, //paises
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}] //Nombres ciudades importantes
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#ffffff'}] //partes mapa
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#38414e'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#746855'}] //Carreteras
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}] //carreteras2
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#35363A'}] //mar
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}] //nombres mares
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ]
        });
      }
</script>
   

3-API (Google Service)

    <script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap"
    async defer></script>

Si te ha sido de utilidad ¡deja un comentario!