Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Símbolos

  1. Introducción
  2. Propiedades de un símbolo
  3. Símbolos predefinidos
  4. Agregar un símbolo a un marcador
  5. Agregar un símbolo a una polilínea
  6. Animar un símbolo

Introducción

Los símbolos resultan útiles cuando se busca usar un icono basado en vectores en un marcador o agregar una imagen a una polilínea.

Un objeto Symbol es una imagen basada en vectores que puede aparecer en un objeto Marker o Polyline. La forma del símbolo se define con un trazado, a través de una notación de trazado SVG. Aunque path es la única propiedad obligatoria, el objeto Symbol admite varias propiedades que te permiten personalizar aspectos visuales, como el color y el grosor del trazo y el relleno. Consulta la lista de propiedades a continuación.

Se encuentran disponibles varios símbolos predefinidos 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 objeto Symbol admite las siguientes propiedades:

  • path (obligatorio) es el trazado que define la forma del símbolo. Puedes usar uno de los trazados predefinidos en google.maps.SymbolPath o definir un trazado personalizado usando la notación de trazados SVG. Nota: Los trazados vectoriales de una polilínea deben caber dentro de un cuadrado de 22 x 22 px. Si en tu trazado se incluyen puntos fuera de este cuadrado, debes fijar la propiedad scale en un valor fraccionario (por ejemplo, “0.2”) de modo que los puntos a escala resultantes se adecuen al cuadrado.
  • anchor establece la posición del símbolo respecto del marcador o de la polilínea. Las coordenadas del trazado del símbolo se convierten a la izquierda y arriba a través de las coordenadas de X e Y del anclaje. De manera 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. En el caso de 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” (transparencia total) a “1.0” (opacidad total). El valor predeterminado es “0.0”.
  • rotation es el ángulo de rotación que debe aplicarse al símbolo, expresado en grados en sentido horario. En forma predeterminada, el valor de rotación de un marcador de símbolo es “0” y un símbolo de una polilínea gira conforme al ángulo del borde sobre el cual se encuentra. Fijar la rotación de un símbolo en una polilínea corregirá la rotación de este de tal manera que dejará de guiarse por la curva de la línea.
  • scale establece la magnitud por la cual se ajusta el tamaño del símbolo. En el caso de los marcadores de símbolos, la escala predeterminada es 1. Después del ajuste, el símbolo puede tener cualquier tamaño. En el caso de los símbolos de una polilínea, la escala predeterminada equivale al grosor de trazo de la polilínea. Después del ajuste, el símbolo debe caber dentro de un cuadrado de 22 x 22 px y quedar centrado en el anclaje correspondiente.
  • strokeColor es el color del relleno del símbolo. A excepción de los colores extendidos con nombre, se admiten todos los colores CSS3. En el caso de los símbolos de marcadores, el valor predeterminado es “black”. En el caso de los símbolos de una polilínea, el color predeterminado equivale al 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” (transparencia total) a “1.0” (opacidad total). En el caso de 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 color del contorno del símbolo. El valor predeterminado es la propiedad scale del símbolo.

Símbolos predefinidos

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

Entre los símbolos predeterminados se incluyen un símbolo y dos tipos de flechas. Se encuentran disponibles flechas que apuntan hacia adelante y atrás. Esto resulta particularmente útil para polilíneas, ya que la orientación de un símbolo de una polilínea es fija. Se considera que la orientación hacia adelante apunta hacia el extremo final 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 trazado vectorial en un marcador, pasa un literal de objeto Symbol con el trazado deseado hacia la propiedad icon del marcador.

En el ejemplo siguiente, se crea un icono con uno de los trazados vectoriales predefinidos.

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

Ver el ejemplo (marker-symbol-predefined).

En el ejemplo siguiente, se emplea notación de trazado SVG para crear un icono personalizado para un marcador.

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

Ver el ejemplo (marker-symbol-custom).

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 de icons[] toma uno o más literales de objeto IconSequence con las siguientes propiedades:

  • icon (obligatorio) es el símbolo que debe representarse en la línea.
  • offset determina la distancia, a partir del inicio de la línea, a la cual debe representarse un icono. Esta distancia puede expresarse como un porcentaje de la longitud de la línea (por ejemplo, “50%”) o en píxeles (por ejemplo, “50px”). El valor predeterminado es “100%”.
  • repeat determina la distancia entre iconos consecutivos en la línea. Esta distancia puede expresarse como un porcentaje de la longitud de la línea (por ejemplo, “50%”) o en píxeles (por ejemplo, “50px”). Para deshabilitar la repetición del icono, especifica “0”. El valor predeterminado es “0”.

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

Flechas

Usa la propiedad IconSequence.offset para agregar flechas al inicio o final de tu 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 el ejemplo (overlay-symbol-arrow).

Líneas punteadas

Puedes lograr un efecto de línea punteada fijando la opacidad de tu polilínea en “0” y superponiendo un símbolo opaco sobre la línea a 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 el ejemplo (overlay-symbol-arrow).

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 el ejemplo (overlay-symbol-custom).

Animar un símbolo

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

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

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds an animated symbol to a polyline.

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

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

Ver el ejemplo (overlay-symbol-animate).

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.