Aprende a alternar entre el tipo de mapa de Google Maps 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 ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores