Trabalhar com marcadores

Desenvolvedores do Espaço Econômico Europeu (EEE)

Crie marcadores para os pontos de referência do trajeto chamando createWaypointAdvancedMarkers(). Por padrão, o createWaypointAdvancedMarkers() cria marcadores para a rota rotulada "A", "B", "C" etc. para cada ponto de parada. Você pode personalizar ainda mais os marcadores transmitindo opções para alterar o estilo com base no índice ou nas propriedades do RouteLeg correspondente.

Confira o código-fonte de exemplo completo

O exemplo de código a seguir mostra como criar marcadores personalizados para pontos de referência de rotas.

TypeScript

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

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps');

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

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

async function getDirections() {
  //@ts-ignore
  // 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: google.maps.marker.AdvancedMarkerElementOptions,
    //@ts-ignore
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
  ) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;

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

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'blue',
          borderColor: 'blue',
        }).element
      }
    }

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

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

  const markers = 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));
}

initMap();
index.ts

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = await mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // 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, 
    //@ts-ignore
    waypointMarkerDetails) {
        const { index, totalMarkers, leg } = waypointMarkerDetails;
        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                }).element
            };
        }
        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                }).element
            };
        }
        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                }).element
            };
        }
        return { ...defaultOptions, map: innerMap };
    }
    const markers = 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));
}
initMap();
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>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map>
    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

Testar amostra

Adicionar marcadores padrão

Para adicionar marcadores usando o estilo padrão, chame createWaypointAdvancedMarkers() transmitindo uma opção de marcador para especificar o mapa atual, conforme mostrado no snippet de código a seguir. 

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

Adicionar marcadores com um estilo personalizado

Para adicionar marcadores usando um estilo personalizado, chame createWaypointAdvancedMarkers() transmitindo opções de marcador que incluem propriedades de estilo personalizadas. Quando você aplica estilos assim, todos os marcadores são estilizados da mesma forma. O snippet de código a seguir mostra como criar marcadores com um estilo personalizado. 

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

Aplicar um estilo personalizado a marcadores individuais

Para aplicar um estilo personalizado a marcadores individuais, transmita uma função para createWaypointAdvancedMarkers() e defina as opções de estilo com base no índice do marcador ou nas propriedades RouteLeg. O snippet de código a seguir mostra uma função para criar marcadores e estilizar com base no índice do marcador:

TypeScript

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

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

  // Style all intermediate waypoints.
  if (!(index === 0 || index === totalMarkers - 1)) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'blue',
        borderColor: 'blue',
      }).element
    }
  }

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

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

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

JavaScript

// Alter style based on marker index.
function markerOptionsMaker(defaultOptions, 
//@ts-ignore
waypointMarkerDetails) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;
    // Style the origin waypoint.
    if (index === 0) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'green',
                borderColor: 'green',
            }).element
        };
    }
    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'blue',
                borderColor: 'blue',
            }).element
        };
    }
    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'red',
                borderColor: 'red',
            }).element
        };
    }
    return { ...defaultOptions, map: innerMap };
}
const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
index.js

Confira o exemplo de código completo

TypeScript

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

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps');

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

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

async function getDirections() {
  //@ts-ignore
  // 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: google.maps.marker.AdvancedMarkerElementOptions,
    //@ts-ignore
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
  ) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;

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

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'blue',
          borderColor: 'blue',
        }).element
      }
    }

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

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

  const markers = 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));
}

initMap();
index.ts

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = await mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // 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, 
    //@ts-ignore
    waypointMarkerDetails) {
        const { index, totalMarkers, leg } = waypointMarkerDetails;
        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                }).element
            };
        }
        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                }).element
            };
        }
        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                }).element
            };
        }
        return { ...defaultOptions, map: innerMap };
    }
    const markers = 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));
}
initMap();
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>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map>
    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

Testar amostra