Praca ze znacznikami

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Jeśli Twój adres rozliczeniowy znajduje się w Europejskim Obszarze Gospodarczym, od 8 lipca 2025 r. do korzystania z usług będą miały zastosowanie Warunki korzystania z usługi Google Maps Platform w EOG . Funkcje różnią się w zależności od regionu. Więcej informacji

Twórz markery dla punktów trasy, wywołując funkcję createWaypointAdvancedMarkers(). Domyślnie createWaypointAdvancedMarkers() tworzy markery dla trasy oznaczonej literami „A”, „B”, „C” itd. dla każdego punktu pośredniego. Możesz dodatkowo dostosować znaczniki, przekazując opcje, które zmieniają styl znacznika na podstawie jego indeksu lub właściwości odpowiadającego mu elementu RouteLeg.

Zobacz pełny przykładowy kod źródłowy

Poniższy przykładowy kod pokazuje, jak tworzyć niestandardowe znaczniki dla punktów trasy.

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map 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

Dodawanie domyślnych znaczników

Aby dodać znaczniki przy użyciu domyślnego stylu, wywołaj funkcję createWaypointAdvancedMarkers(), przekazując opcję znacznika, aby określić bieżącą mapę, jak pokazano w tym fragmencie kodu.

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

Ważne: aby uwzględnić pośrednie punkty trasy, pole legs musi być uwzględnione w ComputeRoutesRequest.fields.

Dodawanie znaczników o stylu niestandardowym

Aby dodać znaczniki za pomocą stylu niestandardowego, wywołaj funkcję createWaypointAdvancedMarkers() przekazując opcje znaczników, które zawierają właściwości stylu niestandardowego. Gdy zastosujesz takie style, wszystkie znaczniki będą miały ten sam styl. Poniższy fragment kodu pokazuje, jak tworzyć znaczniki ze stylem niestandardowym.

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

Stosowanie stylu niestandardowego do poszczególnych znaczników

Aby zastosować styl niestandardowy do poszczególnych znaczników, przekaż funkcję do createWaypointAdvancedMarkers(), aby ustawić opcje stylu znacznika na podstawie indeksu znacznika lub właściwości RouteLeg. Poniższy fragment kodu pokazuje funkcję tworzenia znaczników i nadawania im stylu na podstawie indeksu znacznika:

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

Uwaga: przeczytaj przewodnik na temat korzystania z TypeScriptu i Map 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

Udostępnianie znaczników

Dostępność znaczników możesz zwiększyć w ten sposób:

• Podaj tytuł: ustaw właściwość title w opcjach znacznika, aby podać etykietę znacznika. Ta etykieta jest używana przez czytniki ekranu i technologie wspomagające.
• Rozróżniaj pośrednie punkty trasy: gdy przekazujesz funkcję stylu do elementu createWaypointAdvancedMarkers(), użyj parametrów index i totalMarkers z elementu WaypointMarkerDetails, aby przypisać unikalne, opisowe tytuły i etykiety do pośrednich punktów trasy (np. Waypoint ${(index + 1).toString()}), dzięki czemu użytkownicy czytników ekranu będą mogli odróżnić je od punktu początkowego i docelowego.
• Włącz nawigację za pomocą klawiatury i zdarzenia kliknięcia: ustaw gmpClickable: true w opcjach znacznika, aby interaktywne znaczniki można było zaznaczać za pomocą klawiatury (przy użyciu klawiszy Tab i strzałek) oraz aby reagowały na dane wejściowe z klawiatury i myszy.
• Zwiększ rozmiar znacznika: ustaw właściwość scale na PinElement (np. scale: 1.5), aby zmniejszyć precyzję potrzebną do interakcji ze znacznikami, zwłaszcza na urządzeniach z ekranem dotykowym. Domyślne znaczniki spełniają standard minimalnego rozmiaru WCAG AA, a zwiększenie skali pomaga spełnić standard docelowego rozmiaru WCAG AAA.
• Zachowaj kontrast kolorów: podczas dostosowywania kolorówPinElement wybierz wartościglyphColor i background, które zapewnią wystarczający kontrast, aby etykiety punktów orientacyjnych były czytelne.

Poniższy fragment kodu pokazuje, jak dostosować styl znacznika pod kątem ułatwień dostępu. Zawiera element title, który udostępnia etykietę dla czytników ekranu. Tytuł wykorzystuje indeks do odróżniania pośrednich punktów trasy. Właściwość gmpClickable jest ustawiona na true, aby włączyć nawigację za pomocą klawiatury i zdarzenia kliknięcia, a wartość scale została zwiększona, aby ułatwić interakcję ze znacznikami.

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

Uwaga: przeczytaj przewodnik na temat korzystania z TypeScriptu i Map 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

Więcej informacji znajdziesz w artykule Umożliwianie klikania i korzystania z markerów.

Zobacz pełny przykład

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScript i Map 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