Capa de datos

Seleccionar 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 mostrar datos GeoJSON en un mapa de Google.

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 de estilo 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 representará de forma predeterminada como marcadores, polilíneas y polígonos. Puedes aplicar ajustes de estilo a estas funciones como lo harías con una superposición normal o aplicar reglas de estilo 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 datos de GeoJSON y puntos de visualización, líneas de strings y polígonos con facilidad.
  • 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, las rutas tienen velocidad de tráfico y cada grupo de Girl Guide tiene áreas de venta de galletas. Con google.maps.Data, puedes modelar estas propiedades y definir el estilo 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, cuando miras un mapa de tiendas de conveniencia, puedes elegir mostrar solo las que venden boletos de transporte público.

Dibujar un polígono

La clase Data.Polygon controla el devanado de polígonos. Puedes pasarle un arreglo de uno o más anillos lineales, definidos como coordenadas de latitud y longitud. El primer anillo lineal define el límite exterior del polígono. Si pasas más de un anillo lineal, el segundo y los posteriores se usan para definir trazados internos (agujeros) 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;

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 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { 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;

Cargar GeoJSON

GeoJSON es un estándar común para compartir datos geoespaciales en Internet. Es liviana y fácil de leer, por lo que es ideal para compartir y colaborar. Con la capa de datos, puedes agregar datos de GeoJSON a un mapa de Google en una sola 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 ejemplo siguiente, se muestra cómo agregar un mapa y cargar datos GeoJSON externos.

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;

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;
Ver ejemplo

Probar 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. No dudes en copiar o modificar este archivo mientras pruebas la capa de datos.

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

El texto completo del archivo se puede ver a continuación si expandes la flecha pequeña 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 estilo de GeoJSON

Usa el método Data.setStyle() para especificar cómo deberían verse tus datos. El método setStyle() toma un literal de objeto StyleOptions o una función que calcula el estilo de cada característica.

Reglas de estilo simples

La forma más simple de diseñar atributos es pasar un literal de objeto StyleOptions a setStyle(). Esto establecerá un solo estilo para cada elemento de tu colección. Ten en cuenta que cada tipo de característica solo puede renderizar un subconjunto de las opciones disponibles. Esto significa que es posible combinar estilos para diferentes tipos de características en un solo 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 estilo y características válidas, consulta Opciones de estilo.

A continuación, se muestra un ejemplo de cómo configurar el color de trazo y relleno para varios atributos con un literal de objeto StyleOptions. Ten en cuenta que cada polígono tiene el mismo estilo.

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

Reglas de estilo declarativas

Por lo general, si deseas actualizar el estilo de una gran cantidad de superposiciones, como marcadores o polilíneas, debes iterar a través de cada superposición del mapa y establecer su estilo de forma individual. Con la capa de datos, puedes establecer reglas de forma declarativa y estas se aplicarán a todo tu conjunto de datos. Cuando se actualicen los datos o las reglas, el estilo se aplicará automáticamente a cada característica. Puedes usar las propiedades de una característica para personalizar su estilo.

Por ejemplo, el siguiente código establece el color de cada carácter en nuestra google.json mediante el análisis de su posición en el grupo de caracteres ASCII. En este caso, codificamos la posición del carácter junto con nuestros 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
    };
});

Eliminar estilos

Si deseas quitar los estilos aplicados, pasa un literal de objeto vacío al método setStyles().

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

Esto quitará cualquier estilo personalizado que hayas especificado y las características se renderizarán con los estilos predeterminados. En cambio, si ya no quieres renderizar los atributos, establece la propiedad visible de StyleOptions en false.

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

Invalidar estilos predeterminados

A cada característica de la capa de datos normalmente se le aplican reglas de estilo. Sin embargo, hay momentos en los que te gustaría aplicar reglas de estilo especiales a funciones específicas. Por ejemplo, como una manera de resaltar una característica al hacer clic.

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

// 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 estilo.

Opciones de estilo

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

Disponible en todas las formas geométricas

  • clickable: Si es true, la función 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 sus zIndex, y los valores más altos se muestran delante de los atributos con valores más bajos. Siempre se muestran marcadores frente a cadenas de líneas y polígonos.

Geometrías de puntos disponibles

  • cursor: Cursor del mouse que se muestra cuando se coloca el cursor sobre un elemento.
  • icon: ícono que se mostrará para la geometría de puntos.
  • shape: Define el mapa de imagen que se usa para la detección de hits.
  • title: Texto de desplazamiento.

Geometrías de líneas disponibles

  • strokeColor: El color del trazo. Se admiten todos los colores CSS3, excepto los colores extendidos con nombre.
  • strokeOpacity: La opacidad de trazo entre 0.0 y 1.0.
  • strokeWeight: El ancho del trazo en píxeles.

Geometrías de polígonos disponibles

  • fillColor: El color de relleno. Se admiten todos los colores CSS3, excepto los colores extendidos con nombre.
  • fillOpacity: La opacidad de relleno entre 0.0 y 1.0.
  • strokeColor: El color del trazo. Se admiten todos los colores CSS3, excepto los colores extendidos con nombre.
  • strokeOpacity: La opacidad de trazo entre 0.0 y 1.0.
  • strokeWeight: El ancho del trazo en píxeles.

Agregar controladores de eventos

Las funciones responden a eventos, como mouseup o mousedown. Puedes agregar objetos de escucha de eventos para permitir que los usuarios interactúen con los datos del mapa. En el siguiente ejemplo, agregamos un evento de desplazar el mouse sobre un elemento, que muestra información sobre la función 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 a todas las funciones, sin importar su tipo de geometría:

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

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

Cambiar la apariencia de manera dinámica

Puedes establecer el estilo de la capa de datos si pasas una función que calcula el estilo de cada característica al método google.maps.data.setStyle(). Se llamará a esta función cada vez que se actualicen las propiedades de una característica.

En el siguiente ejemplo, agregamos un objeto de escucha de eventos para el evento click que actualiza la propiedad isColorful de la función. El estilo de la característica se actualiza para reflejar el cambio no bien 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();
});