Símbolos (íconos basados en vectores)

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
  1. Introducción
  2. Propiedades de un símbolo
  3. Símbolos predefinidos
  4. Cómo agregar un símbolo a un marcador
  5. Cómo agregar un símbolo a una polilínea
  6. Cómo animar un símbolo

Introducción

Un objeto Symbol es un ícono basado en vectores que se puede mostrar en un objeto Marker o Polyline. La forma del símbolo se define mediante una ruta que usa la notación de ruta SVG. Si bien path es la única propiedad obligatoria, el objeto Symbol admite una variedad de propiedades que te permiten personalizar aspectos visuales, como el color y el peso del trazo y el relleno. Consulta la lista de propiedades.

Hay varios símbolos predefinidos disponibles a través de la clase SymbolPath. Consulta la lista a continuación.

Propiedades de un símbolo

Ten en cuenta que el comportamiento predeterminado de un objeto Symbol varía levemente según aparezca o no en un marcador o una polilínea. Estas variaciones se describen en la lista de propiedades a continuación.

Un Symbol admite las siguientes propiedades:

  • path (obligatorio) es la ruta que define la forma del símbolo. Puedes usar una de las rutas de acceso predefinidas en google.maps.SymbolPath o definir una ruta personalizada con la notación de ruta de acceso SVG. Nota: Los trazados vectoriales de una polilínea deben caber dentro de un cuadrado de 22x22 píxeles. Si la ruta de acceso incluye puntos fuera de este cuadrado, debes ajustar la propiedad scale del símbolo en un valor fraccionario, como 0.2, para que los puntos ajustados resultantes se ajusten al cuadrado.
  • anchor establece la posición del símbolo en relación con el marcador o la polilínea. Las coordenadas de la ruta del símbolo se traducen hacia la izquierda y hacia arriba según las coordenadas x e y del ancla, respectivamente. De forma predeterminada, los símbolos se fijan en (0, 0). La posición se expresa en el mismo sistema de coordenadas que el trazado del símbolo.
  • fillColor es el color del relleno del símbolo (es decir, la región que el trazo bordea). A excepción de los colores extendidos con nombre, se admiten todos los colores CSS3. Para los símbolos de marcadores, el valor predeterminado es 'black'. En el caso de los símbolos de las polilíneas, el valor predeterminado es el color de trazo de la polilínea correspondiente.
  • fillOpacity define la opacidad relativa (es decir, la falta de transparencia) del relleno del símbolo. Los valores varían de 0.0 (completamente transparente) a 1.0 (completamente opaco). El valor predeterminado es “0.0”.
  • rotation es el ángulo de rotación que debe usarse para rotar el símbolo, expresado en grados en sentido horario. De forma predeterminada, un marcador de símbolo tiene una rotación de 0 y un símbolo de una polilínea gira según el ángulo del borde en el que se encuentra. Al configurar la rotación de un símbolo en una polilínea, se fija la rotación del símbolo para que ya no siga la curva de la línea.
  • scale establece la cantidad de tamaño del símbolo. En el caso de los marcadores de símbolos, la escala predeterminada es 1. Después del escalamiento, el símbolo puede ser de cualquier tamaño. Para los símbolos de una polilínea, la escala predeterminada es el peso de trazo de la polilínea. Después del escalamiento, el símbolo debe estar dentro de un cuadrado de 22 x 22 px, centrado en el anclaje del símbolo.
  • strokeColor es el color del contorno del símbolo. Se admiten todos los colores CSS3, excepto los colores con nombre extendidos. Para los símbolos en marcadores, el valor predeterminado es “negro”. Para los símbolos en una polilínea, el color predeterminado es el color de trazo de la polilínea.
  • strokeOpacity determina la opacidad relativa (es decir, la falta de transparencia) del trazo del símbolo. Los valores varían de 0.0 (completamente transparente) a 1.0 (completamente opaco). Para los marcadores de símbolos, el valor predeterminado es 1.0. En el caso de los símbolos de las polilíneas, el valor predeterminado es la opacidad de trazo de la polilínea.
  • strokeWeight define el peso del contorno del símbolo. El valor predeterminado es el scale del símbolo.

Símbolos predefinidos

La API de Maps JavaScript proporciona algunos símbolos integrados que puedes agregar a marcadores o polilíneas a través de la clase SymbolPath.

Entre los símbolos predeterminados se incluyen un símbolo y dos tipos de flechas. Están disponibles las flechas hacia adelante y atrás. Esto es particularmente útil para polilíneas, ya que la orientación de un símbolo en una polilínea es fija. Se considera que el elemento Forward sigue la dirección de la terminal de la polilínea.

Puedes modificar el trazo o el relleno de los símbolos predefinidos usando cualquiera de las opciones de símbolos predeterminadas.

Se incluyen los siguientes símbolos predefinidos:

Nombre Descripción Ejemplo
google.maps.SymbolPath.CIRCLE Un círculo.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Una flecha que apunta hacia atrás y está totalmente encerrada.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Una flecha que apunta hacia adelante y está totalmente encerrada.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Una flecha que apunta hacia atrás y tiene un lado abierto.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Una flecha que apunta hacia adelante y tiene un lado abierto.

Agregar un símbolo a un marcador

Para mostrar un ícono basado en vectores en un marcador, pasa un literal de objeto Symbol con la ruta deseada a la propiedad icon del marcador. En el siguiente ejemplo, se usa la notación de ruta de acceso SVG a fin de crear un ícono personalizado para un marcador.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
Ver ejemplo

Probar la muestra

Agregar un símbolo a una polilínea

Para mostrar símbolos en una polilínea, configura la propiedad icons[] del objeto PolylineOptions. El arreglo icons[] toma uno o más literales de objeto IconSequence, con las siguientes propiedades:

  • icon (obligatorio) es el símbolo para renderizar en la línea.
  • offset determina la distancia desde el inicio de la línea en la que se renderizará un ícono. Esta distancia se puede expresar como un porcentaje de la longitud de la línea (por ejemplo, '50%&x39;) o en píxeles (por ejemplo, '50px'). El valor predeterminado es '100%'.
  • repeat determina la distancia entre los íconos consecutivos en la línea. Esta distancia se puede expresar como un porcentaje de la longitud de la línea (por ejemplo, '50%') o en píxeles (por ejemplo, '50px'). Para inhabilitar la repetición del ícono, especifica '0'. El valor predeterminado es '0'.

Con una combinación de símbolos y la clase PolylineOptions, tienes mucho control sobre el aspecto de las polilíneas en tu mapa. A continuación, se ofrecen ejemplos de personalización que puedes aplicar.

Flechas

Usa la propiedad IconSequence.offset para agregar flechas al principio o al final de la polilínea.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Ver ejemplo

Líneas punteadas

Para lograr un efecto de línea punteada, establece la opacidad de la polilínea en 0 y superpone un símbolo opaco sobre la línea en intervalos regulares.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Ver ejemplo

Trazados personalizados

Los símbolos personalizados te permiten agregar muchas formas diferentes a una polilínea.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Ver ejemplo

Animar un símbolo

Puedes animar un símbolo en una ruta usando la función window.setInterval() de DOM para cambiar el desplazamiento del símbolo a intervalos fijos.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
Ver ejemplo

Probar la muestra