Map Types

Modify a map type

Depending on what best suits the use case, many types of maps within the API can be used. Map types can be modified by using the mapTypeId property in the mapTypeId object or dynamically modified using the map.setMapTypeId() method.

Here’s a code snippet that demonstrates how to set the map type property during the initialization:

const map = new google.maps.Map(document.getElementById("map"), {
    ...
    mapTypeId: '<map_type>',
}

This is how to update the map type dynamically:

map.setMapTypeId('<map_type>');

These are the four basic types of maps in the Google Maps API:

• roadmap
• satellite
• hybrid
• terrain

The roadmap type

The roadmap type displays the default 2D map type, which is a normal road map. To use it, set the mapTypeId as roadmap.

The satellite type

The satellite type displays satellite imagery from Google Earth on the map. To use it, set the mapTypeId as satellite.

The hybrid type

The hybrid type displays a mix of satellite imagery and the standard road map view. To use it, set the mapTypeId as hybrid.

The terrain type

The terrain type uses terrain data to display a physical map with mountains, lakes, and more. To use it, set the mapTypeId as terrain.

Code example

Here’s an example of a map of Chicago in which the satellite map type has been used upon initialization and controls are added to update it to a hybrid map type and vice versa:

Here’s a brief explanation of the JS file in the above code widget:

• Line 2: We initialize a map object.
• Line 7: We set the map type as satellite.
• Lines 11–21: We represent the event listeners for the div buttons we added in the HTML file for changing map types. We don’t have to worry about understanding events listeners for now.
• Line 12: We use the setMapTypeId() to change the map type to hybrid.
• Line 18: We change the map type back to satellite.