Как работать с маркерами

Разработчики из Европейской экономической зоны (ЕЭЗ)

Если ваш платежный адрес находится в Европейской экономической зоне, с 8 июля 2025 г. на использование вами Сервисов будут распространяться Условия использования платформы Google Карт в ЕЭЗ. Функциональность зависит от региона. Подробнее…

Создайте маркеры для промежуточных точек маршрута, вызвав метод createWaypointAdvancedMarkers(). По умолчанию createWaypointAdvancedMarkers() создает маркеры для маршрута с метками "A", "B", "C" и т. д. для каждой путевой точки. Вы можете дополнительно настроить маркеры, передав параметры, чтобы изменить стиль маркера на основе его индекса или свойств соответствующего объекта RouteLeg.

Посмотреть полный пример исходного кода

В приведенном ниже примере кода показано, как создать специальные маркеры для промежуточных точек маршрута.

TypeScript

let mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);

    // Define routes request with an intermediate stop.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    // Alter style based on marker index.
    function markerOptionsMaker(
        defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
        waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
    ) {
        const { index, totalMarkers } = waypointMarkerDetails;

        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                title: 'Origin',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                    scale: 1.5,
                }),
            };
        }

        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
                map: innerMap,
                gmpClickable: true, // Make marker focusable and allow keyboard navigation
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                    scale: 1.5, // Increase size for better visibilty
                }),
            };
        }

        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                title: 'Destination',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                    scale: 1.5,
                }),
            };
        }

        return { ...defaultOptions, map: innerMap };
    }

    await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);

    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport!);
    innerMap.setHeading(270);

    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => {
        polyline.setMap(innerMap);
    });
}

void init();
index.ts

Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);

    // Define routes request with an intermediate stop.
    const request = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    // Alter style based on marker index.
    function markerOptionsMaker(defaultOptions, waypointMarkerDetails) {
        const { index, totalMarkers } = waypointMarkerDetails;

        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                title: 'Origin',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                    scale: 1.5,
                }),
            };
        }

        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
                map: innerMap,
                gmpClickable: true, // Make marker focusable and allow keyboard navigation
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                    scale: 1.5, // Increase size for better visibilty
                }),
            };
        }

        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                title: 'Destination',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                    scale: 1.5,
                }),
            };
        }

        return { ...defaultOptions, map: innerMap };
    }

    await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);

    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport);
    innerMap.setHeading(270);

    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => {
        polyline.setMap(innerMap);
    });
}

void init();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map>
    </body>
</html>
index.html

Как добавить маркеры по умолчанию

Чтобы добавить маркеры со стилем по умолчанию, вызовите метод createWaypointAdvancedMarkers(), передав параметр маркера, чтобы указать текущую карту, как показано в следующем фрагменте кода.

// Create markers using default style.
const markers = await result.routes[0].createWaypointAdvancedMarkers({ map: innerMap });
  

Важно! Чтобы включить промежуточные точки маршрута, поле legs должно быть запрошено в ComputeRoutesRequest.fields.

Как добавить маркеры с собственным стилем

Чтобы добавить маркеры с собственным стилем, вызовите метод createWaypointAdvancedMarkers(), передав ему параметры маркера, включающие свойства собственного стиля. При применении таких стилей все маркеры будут выглядеть одинаково. В следующем фрагменте кода показано, как создать маркеры с собственным стилем.

// Create markers with a custom style.
const markerOptions = {
  map: innerMap,
  content: new PinElement({
    scale: 1.5,
    background: '#8C0DD1',
    borderColor: '#6D0AA5',
    glyphColor: '#6D0AA5',
  }).element
}

const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptions);
  

Как применить собственный стиль к отдельным маркерам

Чтобы применить к отдельным маркерам собственный стиль, передайте функцию в createWaypointAdvancedMarkers(), чтобы задать параметры стиля маркера на основе индекса маркера или свойств RouteLeg. В приведенном ниже фрагменте кода показана функция, которая создает маркеры и задает их стиль на основе индекса маркера:

TypeScript

// Alter style based on marker index.
function markerOptionsMaker(
    defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
) {
    const { index, totalMarkers } = waypointMarkerDetails;

    // Style the origin waypoint.
    if (index === 0) {
        return {
            ...defaultOptions,
            title: 'Origin',
            map: innerMap,
            gmpClickable: true,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'green',
                borderColor: 'green',
                scale: 1.5,
            }),
        };
    }

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
        return {
            ...defaultOptions,
            title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
            map: innerMap,
            gmpClickable: true, // Make marker focusable and allow keyboard navigation
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'blue',
                borderColor: 'blue',
                scale: 1.5, // Increase size for better visibilty
            }),
        };
    }

    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
        return {
            ...defaultOptions,
            title: 'Destination',
            map: innerMap,
            gmpClickable: true,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'red',
                borderColor: 'red',
                scale: 1.5,
            }),
        };
    }

    return { ...defaultOptions, map: innerMap };
}

await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
index.ts

Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.

JavaScript

// Alter style based on marker index.
function markerOptionsMaker(defaultOptions, waypointMarkerDetails) {
    const { index, totalMarkers } = waypointMarkerDetails;

    // Style the origin waypoint.
    if (index === 0) {
        return {
            ...defaultOptions,
            title: 'Origin',
            map: innerMap,
            gmpClickable: true,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'green',
                borderColor: 'green',
                scale: 1.5,
            }),
        };
    }

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
        return {
            ...defaultOptions,
            title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
            map: innerMap,
            gmpClickable: true, // Make marker focusable and allow keyboard navigation
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'blue',
                borderColor: 'blue',
                scale: 1.5, // Increase size for better visibilty
            }),
        };
    }

    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
        return {
            ...defaultOptions,
            title: 'Destination',
            map: innerMap,
            gmpClickable: true,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'red',
                borderColor: 'red',
                scale: 1.5,
            }),
        };
    }

    return { ...defaultOptions, map: innerMap };
}

await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
index.js

Как сделать маркеры доступными

Чтобы сделать маркеры более доступными, выполните следующие действия:

• Добавьте название. Установите для свойства title в параметрах маркера значение, которое будет использоваться в качестве его названия. Этот ярлык используется программами чтения с экрана и вспомогательными технологиями.
• Различайте промежуточные точки маршрута. При передаче функции стиля в параметр createWaypointAdvancedMarkers() используйте параметры index и totalMarkers из WaypointMarkerDetails, чтобы присвоить промежуточным точкам маршрута уникальные описательные названия и ярлыки (например, Waypoint ${(index + 1).toString()}). Это позволит пользователям программ чтения с экрана отличать их от начальной и конечной точек.
• Включите навигацию с помощью клавиатуры и события кликов. Установите для параметра gmpClickable: true в настройках маркера значение true, чтобы интерактивные маркеры можно было выбирать с помощью клавиатуры (клавиш Tab и стрелок) и чтобы они реагировали на ввод с клавиатуры и управление мышью.
• Увеличьте размер маркера. Задайте свойство scale для элемента PinElement (например, scale: 1.5), чтобы уменьшить точность, необходимую для взаимодействия с маркерами, особенно на устройствах с сенсорным экраном. По умолчанию маркеры соответствуют стандарту минимального размера WCAG AA, а увеличение масштаба помогает обеспечить соответствие стандарту WCAG AAA для целевых устройств.
• Следите за контрастностью цветов. При настройке цветов PinElement выбирайте значения glyphColor и background с достаточным контрастом, чтобы ярлыки путевых точек оставались читаемыми.

В следующем фрагменте кода показано, как задать стиль маркера для обеспечения доступности. У него есть элемент title, чтобы предоставить ярлык для программ чтения с экрана; в заголовке используется индекс, чтобы различать промежуточные точки маршрута. Свойству gmpClickable присвоено значение true, чтобы включить навигацию с помощью клавиатуры и события кликов, а значение scale было увеличено, чтобы упростить взаимодействие с маркерами.

TypeScript

// Style all intermediate waypoints.
if (!(index === 0 || index === totalMarkers - 1)) {
    return {
        ...defaultOptions,
        title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
        map: innerMap,
        gmpClickable: true, // Make marker focusable and allow keyboard navigation
        content: new PinElement({
            glyphText: (index + 1).toString(),
            glyphColor: 'white',
            background: 'blue',
            borderColor: 'blue',
            scale: 1.5, // Increase size for better visibilty
        }),
    };
}
index.ts

Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.

JavaScript

// Style all intermediate waypoints.
if (!(index === 0 || index === totalMarkers - 1)) {
    return {
        ...defaultOptions,
        title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
        map: innerMap,
        gmpClickable: true, // Make marker focusable and allow keyboard navigation
        content: new PinElement({
            glyphText: (index + 1).toString(),
            glyphColor: 'white',
            background: 'blue',
            borderColor: 'blue',
            scale: 1.5, // Increase size for better visibilty
        }),
    };
}
index.js

Подробнее о том, как сделать маркер кликабельным и доступным для перетаскивания…

Посмотреть полный пример

TypeScript

let mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);

    // Define routes request with an intermediate stop.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    // Alter style based on marker index.
    function markerOptionsMaker(
        defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
        waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
    ) {
        const { index, totalMarkers } = waypointMarkerDetails;

        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                title: 'Origin',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                    scale: 1.5,
                }),
            };
        }

        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
                map: innerMap,
                gmpClickable: true, // Make marker focusable and allow keyboard navigation
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                    scale: 1.5, // Increase size for better visibilty
                }),
            };
        }

        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                title: 'Destination',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                    scale: 1.5,
                }),
            };
        }

        return { ...defaultOptions, map: innerMap };
    }

    await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);

    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport!);
    innerMap.setHeading(270);

    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => {
        polyline.setMap(innerMap);
    });
}

void init();
index.ts

Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);

    // Define routes request with an intermediate stop.
    const request = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    // Alter style based on marker index.
    function markerOptionsMaker(defaultOptions, waypointMarkerDetails) {
        const { index, totalMarkers } = waypointMarkerDetails;

        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                title: 'Origin',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                    scale: 1.5,
                }),
            };
        }

        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                title: `Waypoint ${(index + 1).toString()}`, // Provide label for screenreaders
                map: innerMap,
                gmpClickable: true, // Make marker focusable and allow keyboard navigation
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                    scale: 1.5, // Increase size for better visibilty
                }),
            };
        }

        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                title: 'Destination',
                map: innerMap,
                gmpClickable: true,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                    scale: 1.5,
                }),
            };
        }

        return { ...defaultOptions, map: innerMap };
    }

    await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);

    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport);
    innerMap.setHeading(270);

    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => {
        polyline.setMap(innerMap);
    });
}

void init();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map>
    </body>
</html>
index.html