Google Maps - UI Controls

Google Maps - Customizing UI Controls

The Maps JavaScript API provides a default set of User Interface (UI) controls that allow users to interact with the map (like zooming and panning). You have granular control over which controls appear and where they are positioned.

Default Controls

By default, a Google Map typically includes the following controls:

• Zoom: Displays ’+’ and ’-’ buttons (usually on the right) to change the map’s zoom level.
• Map Type: Allows users to switch between map types (e.g., Roadmap, Satellite). Usually appears in the top-left.
• Street View: Shows the Pegman icon (usually on the right) which can be dragged onto the map to activate Street View imagery.
• Fullscreen: Allows users to open the map in fullscreen mode (usually in the top-right).
• Rotate: Appears automatically when 45° oblique imagery is available, allowing rotation (usually grouped with Zoom).

The exact appearance and placement can vary slightly based on map size and device.

Example: Default Controls Map

The basic map created in the ‘Getting Started’ chapter shows these default controls.

Expected Output:

A standard map view with zoom controls (+/-), map type selection (Map/Satellite), the Street View Pegman icon, and a fullscreen button.

Disabling All Default UI Controls

You can hide all default controls at once by setting the disableDefaultUI option to true in the MapOptions.

Example: Disabling Default UI

Modify the initMap function to include this option:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map Without Default UI</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: 17.6868, lng: 83.2185 };
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 10,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap',
                disableDefaultUI: true // <-- Add this line
            });
        }
    </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:

The map will display without any of the standard controls (Zoom, Map Type, Street View, Fullscreen). You can still pan by dragging and zoom using scroll wheel/gestures, but the on-screen buttons are gone.

Enabling/Disabling Individual Controls

Instead of disabling everything, you can control each UI element individually using boolean options within the MapOptions. If disableDefaultUI is false (the default), you can selectively turn controls on or off.

• zoomControl: true (default) / false
• mapTypeControl: true (default) / false
• streetViewControl: true (default) / false
• fullscreenControl: true (default) / false
• scaleControl: false (default) / true (Displays a map scale element)
• rotateControl: true (default, appears when needed) / false

Note: panControl and overviewMapControl from older API versions are deprecated and no longer available.

Example: Enabling Scale Control and Disabling Street View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Controls Map</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: 19.0760, lng: 72.8777 }; // Mumbai
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 11,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'satellite',
                // disableDefaultUI: false, // Default is false, so not strictly needed
                zoomControl: true,          // Keep zoom
                mapTypeControl: true,       // Keep map type
                streetViewControl: false,   // <-- Disable Street View
                fullscreenControl: true,    // Keep fullscreen
                scaleControl: true          // <-- Enable Scale
            });
        }
    </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:

The map displays Mumbai in satellite view. It includes zoom, map type, and fullscreen controls. The Street View Pegman is hidden, but a map scale (e.g., ‘2 km’) is now visible, usually in the bottom-right.

Control Options and Positioning

You can further customize the appearance and position of some controls using dedicated Options objects (e.g., zoomControlOptions, mapTypeControlOptions). The most common customization is changing the position.

To change a control’s position, set the position property within its options object. Use values from the google.maps.ControlPosition enum.

Available Positions (google.maps.ControlPosition):

• TOP_CENTER, TOP_LEFT, TOP_RIGHT
• LEFT_TOP, RIGHT_TOP
• LEFT_CENTER, RIGHT_CENTER
• LEFT_BOTTOM, RIGHT_BOTTOM
• BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT

Note: The deprecated style options (like google.maps.ZoomControlStyle.SMALL or google.maps.MapTypeControlStyle.DROPDOWN_MENU) are no longer supported effectively in the modern API. Positioning is the primary layout customization.

Example: Positioning Controls

Let’s move the Map Type control to the top center and the Zoom control to the bottom left.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioned Controls Map</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: 34.0522, lng: -118.2437 }; // Los Angeles
            // Import ControlPosition along with Map
            const { Map, ControlPosition } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                zoom: 10,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap',
                streetViewControl: false,
                fullscreenControl: false,

                // Enable and configure Map Type control
                mapTypeControl: true,
                mapTypeControlOptions: {
                    // style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, // Style deprecated
                    position: ControlPosition.TOP_CENTER // <-- Position it
                },

                // Enable and configure Zoom control
                zoomControl: true,
                zoomControlOptions: {
                    position: ControlPosition.LEFT_BOTTOM // <-- Position it
                }
            });
        }
    </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:

The map shows Los Angeles. The Map/Satellite buttons are now centered at the top edge of the map. The zoom (+/-) buttons are in the bottom-left corner. Street View and Fullscreen controls are hidden.

Further Reading:

• Official Documentation on Controls
• ControlPosition Enum Reference