Làm việc với điểm đánh dấu

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Nếu địa chỉ thanh toán của bạn ở Khu vực kinh tế Châu Âu, thì kể từ ngày 8 tháng 7 năm 2025, Điều khoản dịch vụ của Google Maps Platform ở Khu vực kinh tế Châu Âu sẽ áp dụng cho việc bạn sử dụng Dịch vụ. Chức năng có thể khác nhau tuỳ theo khu vực. Tìm hiểu thêm.

Tạo điểm đánh dấu cho các điểm tham chiếu trên tuyến đường bằng cách gọi createWaypointAdvancedMarkers(). Theo mặc định, createWaypointAdvancedMarkers() sẽ tạo điểm đánh dấu cho tuyến đường được gắn nhãn "A", "B", "C", v.v. cho mỗi điểm tham chiếu. Bạn có thể tuỳ chỉnh thêm các điểm đánh dấu bằng cách truyền các lựa chọn để thay đổi kiểu điểm đánh dấu dựa trên chỉ mục điểm đánh dấu hoặc các thuộc tính của RouteLeg tương ứng.

Xem mã nguồn ví dụ hoàn chỉnh

Đoạn mã mẫu sau đây cho biết cách tạo điểm đánh dấu tuỳ chỉnh cho các điểm tham chiếu trên tuyến đường.

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Thêm điểm đánh dấu mặc định

Để thêm điểm đánh dấu bằng kiểu mặc định, hãy gọi createWaypointAdvancedMarkers() bằng cách truyền một lựa chọn về điểm đánh dấu để chỉ định bản đồ hiện tại, như minh hoạ trong đoạn mã sau.

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

Lưu ý quan trọng: Bạn phải yêu cầu trường legs trong ComputeRoutesRequest.fields để các điểm tham chiếu trung gian được đưa vào.

Thêm điểm đánh dấu có kiểu tuỳ chỉnh

Để thêm điểm đánh dấu bằng kiểu tuỳ chỉnh, hãy gọi createWaypointAdvancedMarkers() bằng cách truyền các lựa chọn về điểm đánh dấu, bao gồm cả các thuộc tính kiểu tuỳ chỉnh. Khi bạn áp dụng các kiểu như thế này, tất cả các điểm đánh dấu đều được tạo kiểu theo cùng một cách. Đoạn mã sau đây cho biết cách tạo điểm đánh dấu bằng kiểu tuỳ chỉnh.

// 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);
  

Áp dụng kiểu tuỳ chỉnh cho từng điểm đánh dấu

Để áp dụng kiểu tuỳ chỉnh cho từng điểm đánh dấu, hãy truyền một hàm đến createWaypointAdvancedMarkers() để đặt các lựa chọn về kiểu điểm đánh dấu dựa trên chỉ mục điểm đánh dấu hoặc các thuộc tính RouteLeg. Đoạn mã sau đây cho thấy một hàm để tạo điểm đánh dấu và tạo kiểu cho điểm đánh dấu dựa trên chỉ mục điểm đánh dấu:

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Giúp người dùng tiếp cận được điểm đánh dấu

Bạn có thể cải thiện khả năng hỗ trợ tiếp cận của điểm đánh dấu theo những cách sau:

• Cung cấp tiêu đề: Đặt thuộc tính title trong các lựa chọn về điểm đánh dấu để cung cấp nhãn cho điểm đánh dấu. Nhãn này được trình đọc màn hình và công nghệ hỗ trợ sử dụng.
• Phân biệt các điểm tham chiếu trung gian: Khi truyền một hàm kiểu đến createWaypointAdvancedMarkers(), hãy dùng các tham số index và totalMarkers từ WaypointMarkerDetails để chỉ định tiêu đề và nhãn riêng biệt, mang tính mô tả cho các điểm tham chiếu trung gian (ví dụ: Waypoint ${(index + 1).toString()}) để người dùng trình đọc màn hình có thể phân biệt các điểm này với điểm xuất phát và điểm đến.
• Bật sự kiện nhấp và chế độ điều hướng bằng bàn phím: Đặt gmpClickable: true trong các lựa chọn về điểm đánh dấu để làm cho các điểm đánh dấu tương tác có thể lấy tiêu điểm bằng bàn phím (bằng cách sử dụng phím Tab và các phím mũi tên) và có thể phản hồi dữ liệu đầu vào từ bàn phím và chuột.
• Tăng kích thước điểm đánh dấu: Đặt thuộc tính scale trên PinElement (ví dụ: scale: 1.5) để giảm độ chính xác cần thiết để tương tác với điểm đánh dấu, đặc biệt là trên các thiết bị có màn hình cảm ứng. Các điểm đánh dấu mặc định đáp ứng tiêu chuẩn kích thước tối thiểu theo WCAG AA và việc tăng tỷ lệ sẽ giúp đáp ứng tiêu chuẩn kích thước mục tiêu theo WCAG AAA.
• Duy trì độ tương phản màu: Khi tuỳ chỉnh màu PinElement, hãy chọn các giá trị glyphColor và background có độ tương phản phù hợp để nhãn điểm tham chiếu vẫn dễ đọc.

Đoạn mã sau đây cho biết cách tạo kiểu cho một điểm đánh dấu để hỗ trợ tiếp cận. Nút này có một title để cung cấp nhãn cho trình đọc màn hình; tiêu đề sử dụng chỉ mục để phân biệt các điểm tham chiếu trung gian. Thuộc tính gmpClickable được đặt thành true để bật thao tác di chuyển bằng bàn phím và các sự kiện nhấp chuột, đồng thời scale đã được tăng lên để người dùng dễ dàng tương tác với các điểm đánh dấu hơn.

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Để biết thêm thông tin, hãy xem phần Làm cho điểm đánh dấu có thể nhấp và hỗ trợ tiếp cận.

Xem ví dụ đầy đủ

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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