Learn how to toggle from map type of Google Maps with JavaScript.

If you are working on a form that allows you to customize some map view, you will need to switch from type in the map dinamically. Although this is a very simple feature, not everybody knows how to do it. To guide you, we'll initialize a simple map with the satellite view and the instance will be stored in the map variable:

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

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

            // Defining map type during the initialization
            mapTypeId: 'satellite'
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Now that you have an instance, you can cast the setMapTypeId method from the map variable. Just provide the new type as a string or from the MapTypeId interface e.g:

// Using the MapTypeId interface




// Using the string representation




Happy coding !

Senior Software Engineer at EPAM Anywhere. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Become a more social person