Utiliser les repères

Développeurs de l'Espace économique européen (EEE)

Créez des repères pour les points de cheminement de l'itinéraire en appelant createWaypointAdvancedMarkers(). Par défaut, createWaypointAdvancedMarkers() crée des repères pour l'itinéraire libellé "A", "B", "C", etc. pour chaque point de repère. Vous pouvez personnaliser davantage les repères en transmettant des options permettant de modifier leur style en fonction de leur index ou des propriétés du RouteLeg correspondant.

Afficher l'exemple de code source complet

L'exemple de code suivant montre comment créer des repères personnalisés pour les points de cheminement d'un itinéraire.

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

Essayer l'exemple

Ajouter des repères par défaut

Pour ajouter des repères avec le style par défaut, appelez createWaypointAdvancedMarkers() en transmettant une option de repère pour spécifier la carte actuelle, comme indiqué dans l'extrait de code suivant. 

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

Ajouter des repères avec un style personnalisé

Pour ajouter des repères à l'aide d'un style personnalisé, appelez createWaypointAdvancedMarkers() en transmettant des options de repère qui incluent des propriétés de style personnalisé. Lorsque vous appliquez des styles comme celui-ci, tous les repères sont stylisés de la même manière. L'extrait de code suivant montre comment créer des repères avec un style personnalisé. 

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

Appliquer un style personnalisé à des repères individuels

Pour appliquer un style personnalisé à des repères individuels, transmettez une fonction à createWaypointAdvancedMarkers() afin de définir les options de style des repères en fonction de l'index des repères ou des propriétés RouteLeg. L'extrait de code suivant montre une fonction permettant de créer des repères et de les styliser en fonction de l'index du repère :

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

Afficher l'exemple de code complet

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

Essayer l'exemple