Cómo cambiar y obtener una vista previa del tipo de mapa en Google Maps de forma dinámica con JavaScript

Si está trabajando en un formulario que le permite personalizar alguna vista de mapa, deberá cambiar de tipo en el mapa de forma dinámica. Aunque se trata de una función muy sencilla, no todo el mundo sabe cómo hacerlo. Para guiarlo, inicializaremos un mapa simple con la vista de satélite y la instancia se almacenará en la variable del mapa:

<div id="map"></div>
<script>
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397, 
                lng: 150.644
            },
            zoom: 8,

            // Definición del tipo de mapa durante la inicialización
            mapTypeId: 'satellite'
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Ahora que tiene una instancia, puede convertir el método setMapTypeId desde la variable del mapa. Simplemente proporcione el nuevo tipo como una cadena o desde la MapTypeIdinterfaz, por ejemplo:

// Usando la interfaz MapTypeId
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

map.setMapTypeId(google.maps.MapTypeId.SATELLITE);

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

// Usando la representación de cadena
map.setMapTypeId("roadmap");

map.setMapTypeId("hybrid");

map.setMapTypeId("satellite");

map.setMapTypeId("terrain");

Que te diviertas ❤️!