Capa de datos

Selecciona la plataforma: Android iOS JavaScript

La capa de datos de Google Maps proporciona un contenedor para datos geoespaciales arbitrarios. Puedes usar la capa de datos para almacenar tus datos personalizados o para mostrar datos de GeoJSON en un mapa de Google Maps.

Descripción general

Mira el siguiente video de DevBytes para obtener más información acerca de la capa de datos:

Con la API de Maps JavaScript, puedes marcar un mapa con varias superposiciones, como marcadores, polilíneas, polígonos, etc. Cada una de estas anotaciones combina información sobre el diseño con datos de ubicación. La clase google.maps.Data es un contenedor de datos geoespaciales arbitrarios. En lugar de agregar estas superposiciones, puedes usar la capa de datos para agregar datos geográficos arbitrarios a tu mapa. Si esos datos contienen elementos geométricos, como puntos, líneas o polígonos, la API los renderizará de manera predeterminada como marcadores, polilíneas y polígonos. Puedes aplicar ajustes de diseño a estas funciones como lo harías con una superposición normal, o bien puedes aplicar reglas de diseño basadas en otras propiedades contenidas en tu conjunto de datos.

La clase google.maps.Data te permite hacer lo siguiente:

  • Dibuja polígonos en tu mapa.
  • Agrega datos de GeoJSON a tu mapa.
    GeoJSON es un estándar de datos geoespaciales en Internet. La clase Data sigue la estructura de GeoJSON en su representación de los datos y facilita la visualización de datos de GeoJSON. Usa el método loadGeoJson() para importar fácilmente datos de GeoJSON, así como puntos de visualización, strings de líneas y polígonos.
  • Usa google.maps.Data para modelar datos arbitrarios.
    La mayoría de las entidades reales tienen otras propiedades asociadas. Por ejemplo, las tiendas tienen horarios de atención, a las rutas se les asignan velocidades de circulación y cada grupo de Girl Guides tiene territorios de venta de galletas. Con google.maps.Data, puedes modelar estas propiedades y ajustar el diseño de tus datos según corresponda.
  • Elige cómo se representarán tus datos y cambia de opinión sobre la marcha.
    La capa de datos te permite tomar decisiones sobre la visualización y la interacción de tus datos. Por ejemplo, al mirar un mapa de minimercados podrías elegir mostrar únicamente aquellos en los que se vendan boletos de transporte público.

Cómo dibujar un polígono

La clase Data.Polygon controla el devanado de polígonos. Puedes pasarle un array de uno o más anillos lineales, definidos como coordenadas de latitud y longitud. El primer anillo lineal define el borde exterior del polígono. Si pasas más de un anillo lineal, el segundo (y los posteriores) se usa para definir rutas internas (huecos) en el polígono.

En el siguiente ejemplo, se crea un polígono rectangular con dos huecos:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

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

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

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

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

Cómo cargar GeoJSON

GeoJSON es un estándar común para compartir datos geoespaciales en Internet. Es ligero y está formulado en lenguaje natural sencillo, lo cual lo convierte en una herramienta ideal para uso compartido y colaboración. Con la capa de datos, puedes agregar datos de GeoJSON a un mapa de Google Maps en solo una línea de código.

map.data.loadGeoJson('google.json');

Cada mapa tiene un objeto map.data que actúa como una capa de datos para datos geoespaciales arbitrarios, incluido GeoJSON. Puedes cargar y mostrar un archivo GeoJSON mediante una llamada al método loadGeoJSON() del objeto data. En el siguiente ejemplo, se muestra cómo agregar un mapa y cargar datos externos de GeoJSON.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

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

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
Ver ejemplo

Prueba la muestra

Ejemplo de GeoJSON

En la mayoría de los ejemplos de esta página se usa un archivo GeoJSON común. Este archivo define los seis caracteres de "Google" como polígonos sobre Australia. Si lo deseas, puedes copiar o modificar este archivo cuando pruebes la capa de datos.

Nota: Para cargar un archivo JSON desde otro dominio, ese dominio debe tener habilitado el uso compartido de recursos entre dominios.

A continuación, puedes ver el texto completo del archivo si expandes la flecha pequeña que se encuentra junto a las palabras google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

Datos de diseño de GeoJSON

Usa el método Data.setStyle() para especificar cómo se deberían ver tus datos. El método setStyle() toma un literal de objeto StyleOptions o una función que calcula el diseño de cada elemento.

Reglas de diseño simples

La manera más simple de aplicar diseño a elementos es pasar un literal de objeto StyleOptions a setStyle(). Así, se establece un diseño único para cada elemento de tu colección. Ten en cuenta que cada tipo de elemento solo puede renderizar un subconjunto de las opciones disponibles. Esto significa que es posible combinar diseños de diferentes tipos de elementos en un único literal de objeto. Por ejemplo, en el siguiente fragmento, se establece un icon personalizado que solo afecta a las geometrías de puntos, y fillColor, que solo afecta a los polígonos.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Para obtener más información sobre combinaciones de diseño y elementos válidos, consulta Opciones de diseño.

A continuación, se muestra un ejemplo de cómo configurar los colores de trazo y relleno para varios atributos con un literal de objeto StyleOptions. Observa que el diseño de cada polígono es el mismo.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Reglas de diseño declarativas

Si deseas actualizar el diseño de una cantidad significativa de superposiciones, como marcadores o polilíneas, normalmente es necesario aplicar iteraciones en cada superposición de tu mapa y configurar el diseño de manera individual. Con la capa de datos, puedes configurar reglas de forma declarativa, las cuales se aplicarán a todo tu conjunto de datos. Cuando se actualicen los datos o las reglas, el diseño se aplicará automáticamente a cada elemento. Puedes usar las propiedades de los elementos para personalizar su diseño.

El siguiente código, por ejemplo, establece el color de cada carácter de nuestro google.json mediante el análisis de su posición en el grupo de caracteres ASCII. En este caso, se codificó la posición de caracteres junto con los datos.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Cómo quitar diseños

Para quitar los diseños aplicados, pasa un literal de objeto vacío al método setStyles().

// Remove custom styles.
map.data.setStyle({});

Así, se quitarán los diseños personalizados que hayas especificado, y los elementos se renderizarán usando los diseños predeterminados. En cambio, si ya no quieres renderizar los elementos, establece la propiedad visible de StyleOptions en false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Cómo anular diseños predeterminados

A cada elemento de la capa de datos normalmente se le aplican reglas de diseño. Sin embargo, existen ocasiones en las que es recomendable aplicar reglas de diseño especiales a elementos específicos, por ejemplo, para resaltar un elemento al hacer clic.

Para aplicar reglas de diseño especiales, usa el método overrideStyle(). Cualquier propiedad que cambies con el método overrideStyle() se aplica además de los diseños globales ya especificados en setStyle(). Por ejemplo, el siguiente código permite cambiar el color de relleno de un polígono con un clic, pero no establece ningún otro diseño.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Llama al método revertStyle() para quitar todas las anulaciones de diseño.

Opciones de diseño

Las opciones disponibles para aplicar ajustes de diseño a cada elemento dependen de los tipos de funciones. Por ejemplo, fillColor solo se renderiza en las geometrías de los polígonos, mientras que icon solo aparece en una geometría de puntos. Hay más información disponible en la documentación de referencia de StyleOptions.

Parámetros disponibles en todas las geometrías

  • clickable: Si es true, el elemento recibe eventos táctiles y del mouse.
  • visible: Si es true, el elemento es visible.
  • zIndex: Todos los elementos se muestran en el mapa en el orden de su zIndex, y los valores más altos se muestran delante de los elementos con valores más bajos. Siempre se muestran marcadores frente a strings de líneas y polígonos.

Parámetros disponibles en las geometrías de puntos

  • cursor: El cursor del mouse se muestra al colocarlo sobre un elemento.
  • icon: El ícono que se muestra para la geometría de puntos.
  • shape: Define el mapa de imágenes que se utiliza para la detección de hits.
  • title: Texto de desplazamiento.

Parámetros disponibles en las geometrías de líneas

  • strokeColor: Indica el color del trazo. Admite todos los colores CSS3, salvo aquellos con nombres extendidos.
  • strokeOpacity: Indica la opacidad del color, que se extiende del 0.0 al 1.0.
  • strokeWeight: Indica el ancho del trazo en píxeles.

Parámetros disponibles en las geometrías de polígonos

  • fillColor: Indica el color de relleno. Admite todos los colores CSS3, salvo aquellos con nombres extendidos.
  • fillOpacity: Indica la opacidad de relleno, que se extiende del 0.0 al 1.0..
  • strokeColor: Indica el color del trazo. Admite todos los colores CSS3, salvo aquellos con nombres extendidos.
  • strokeOpacity: Indica la opacidad del color, que se extiende del 0.0 al 1.0.
  • strokeWeight: Indica el ancho del trazo en píxeles.

Cómo agregar controladores de eventos

Los elementos responden a eventos, como mouseup o mousedown. Puedes agregar objetos de escucha de eventos para que los usuarios interactúen con los datos del mapa. En el siguiente ejemplo, se agrega un evento de desplazamiento del mouse que muestra información acerca del componente debajo del cursor del mouse.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Eventos de la capa de datos

Los siguientes eventos son comunes para todos los elementos, independientemente de su tipo de geometría:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Obtén más información sobre estos eventos en la documentación de referencia de la clase google.maps.data.

Cómo cambiar la apariencia de manera dinámica

Puedes configurar el diseño de la capa de datos si pasas una función que calcule el diseño de cada elemento en el método google.maps.data.setStyle(). Se llamará a esta función cada vez que se actualicen las propiedades de un elemento.

En el siguiente ejemplo, agregamos un objeto de escucha de eventos para el evento click que actualiza la propiedad isColorful del elemento. El diseño del elemento se actualiza para reflejar el cambio en cuanto se configura la propiedad.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});