Google Maps - Types

Google Maps - Understanding Map Types

The Maps JavaScript API offers several fundamental map types, providing different visual representations of the world.

Base Map Types

You can set the initial map type using the mapTypeId property in MapOptions when creating the map. The primary types are:

roadmap: (Default) The standard, familiar Google Maps view showing roads, labels, points of interest, and political boundaries.
satellite: Displays photographic satellite imagery.
hybrid: Shows satellite imagery overlaid with a transparent layer of major roads, labels, and boundaries.
terrain: Emphasizes physical terrain features like mountains, rivers, and elevation, along with roads and labels.

Setting the Initial Map Type

Specify the desired type ID string when initializing the map:

async function initMap() {
    const position = { lat: 35.6895, lng: 139.6917 }; // Tokyo
    const { Map } = await google.maps.importLibrary("maps");

    const map = new Map(document.getElementById("map"), {
        zoom: 11,
        center: position,
        mapId: "DEMO_MAP_ID",
        mapTypeId: 'satellite' // <-- Set initial type to Satellite
    });
}

Example: Displaying Different Map Types

Let’s look at code examples for each type. Remember to include your API key in the script URL.

Roadmap (Default)

This is the standard view, often used for navigation and general location display.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roadmap Example</title>
    <style>#map { height: 400px; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; }</style>
</head>
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 40.7128, lng: -74.0060 }; // New York City
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 12,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap' // Explicitly setting the default
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

Expected Output: A typical map of New York City showing streets, parks, and labels.

Satellite

Useful for seeing the actual landscape, buildings, and geographical features from above.

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: -15.7942, lng: -47.8825 }; // Brasília
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 14,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'satellite' // <-- Set to Satellite
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

Expected Output: An aerial photograph of Brasília showing buildings, roads (without labels initially), and surrounding terrain.

Hybrid

Combines the visual context of satellite imagery with the informational context of road names and labels.

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 51.5074, lng: -0.1278 }; // London
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 13,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'hybrid' // <-- Set to Hybrid
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

Expected Output: A satellite view of London with major roads and place names overlaid.

Terrain

Ideal for visualizing topography, such as hiking trails, national parks, or mountainous regions.

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 36.5786, lng: -118.2920 }; // Mt. Whitney area
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 11,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'terrain' // <-- Set to Terrain
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

Expected Output: A map showing the mountainous terrain around Mt. Whitney, with elevation contours, shaded relief, roads, and labels.

Changing Map Type Programmatically

You can change the map type after the map has been initialized using the setMapTypeId() method of the Map object.

// Assuming 'map' is your Map instance
map.setMapTypeId('satellite');

This is often used in conjunction with custom controls or event listeners to allow users to switch types.

Cloud-Based Maps Styling and Map IDs

While mapTypeId sets the base map, the modern and recommended way to customize the look and feel (colors, density of features, visibility of specific elements) is through Cloud-based Maps Styling.

You create a Map Style in the Google Cloud Console, visually customizing the base map.
You associate this style with a Map ID.
You include the mapId in your MapOptions when creating the map (as shown in the examples using mapId: "DEMO_MAP_ID").
Using a Map ID allows you to update map styles in the Cloud Console without changing your application code.

Using a mapId provides much more flexibility than just switching the base mapTypeId. You can tailor the map precisely to your brand and application’s needs.