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

Capa de datos

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

Información general

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

Usando la Google Maps JavaScript API, puedes marcar un mapa con varias superposiciones, como marcadores, polilíneas, polígonos, etc. En cada una de estas anotaciones se combinan información sobre estilo y datos sobre ubicaciones. La clase google.maps.Data es un contenedor para datos geoespaciales. 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 manera 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:

  • Dibuja polígonos en tu mapa.
  • Agregar 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 cadenas y polígonos.
  • Usa google.maps.Data para modelas datos arbitrarios.
    La mayoría de las entidades reales tienen otras propiedades asociadas. Por ejemplo, las tiendas tienen horarios de apertura, a las carreteras 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 aplicar ajustes de estilo a tus datos de manera correspondiente.
  • Elige la manera en que se representarán tus datos y cambia de parecer en el momento.
    La capa de datos te permite tomar decisiones acerca de la visualización y la interacción de tus datos. Por ejemplo, al mirar un mapa de autoservicios podrías elegir mostrar únicamente aquellos en los que se vendan tiques de transporte.

Dibujar un polígono

La clase Data.Polygon se encarga de controlar el devanado de polígonos. Puedes pasarle una matriz 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 trazados internos (huecos) en el polígono.

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

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

function initMap() {
  var 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.
  var 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.
  var 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.
  var 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])})
}
<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 the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var 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.
  var 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.
  var 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.
  var 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])})
}

Ver el ejemplo.

Cargar GeoJSON

GeoJSON es un estándar que permite 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 visualizar un archivo GeoJSON llamando al método loadGeoJSON() del objeto data. En el ejemplo siguiente se muestra la manera de agregar un mapa y cargar datos externos de GeoJSON.

var 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');
}
<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>
var 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');
}

Ver el ejemplo.

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 cuando pruebes la capa de datos.

Nota: Para cargar un archivo json desde otro dominio, debe habilitar uso compartido de recursos entre orígenes en ese dominio.

A continuación, se puede ver el texto completo del archivo expandiendo la flecha pequeña que se halla junto a las palabras google.json.

Datos de estilo de GeoJSON

Usa el método Data.setStyle() para especificar el aspecto que deben tener tus datos. El método setStyle() toma un literal de objeto StyleOptions o una función que computa el estilo de cada característica.

Reglas de estilo simples

La mejor manera de aplicar ajustes de estilo es pasar un literal de objeto StyleOptions a setStyle(). Con esto se establecerá un único estilo para cada característica de tu colección. Ten en cuenta que cada tipo de característica solo puede representar un subconjunto de las opciones disponibles. Esto significa que es posible combinar estilos de diferentes tipos de funciones en un único literal de objeto. El siguiente fragmento de código, por ejemplo, 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'
});

Puedes obtener más información sobre combinaciones de estilo y funciones válidas en Opciones de estilo.

A continuación, se ofrece un ejemplo de configuración del color de trazo y relleno para varias funciones a través de un literal de objeto StyleOptions. Observa que el estilo de cada polígono es el mismo.

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

Ver el ejemplo

Reglas de estilo declarativas

Si deseas actualizar el estilo de un amplio número de superposiciones, como marcadores o polilíneas, normalmente es necesario aplicar iteraciones en cada superposición de tu mapa y configurar el estilo de manera individual. Con la capa de datos, puedes configurar reglas en forma declarativa y estas se aplicarán a todo tu conjunto de datos. Cuando los datos o las reglas se actualicen, el estilo se aplicará en forma automática a cada característica. Puedes usar las propiedades de una característica para personalizar su estilo.

El código siguiente, por ejemplo, establece el color de cada carácter en google.json al examinar su posición en el conjunto 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
    };
});

Eliminar estilos

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

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

Con esto se eliminarán estilos personalizados que hayas especificado, y las funciones se representarán usando los estilos predeterminados. Si en lugar de ello deseas no representar las funciones, fija la propiedad visible de StyleOptions en el valor 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, existen ocasiones en las que es recomendable 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(). Las propiedades que cambies con el método overrideStyle() se aplican junto con los estilos globales ya especificados en setStyle(). Por ejemplo, el código siguiente permitirá cambia el color de relleno de un polígono con un clic, pero no configurará 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 revertStyles() para eliminar todas anulaciones de estilos.

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 representará geometrías poligonales, mientras que icon solo aparecerá en una geometría de puntos. Se encuentra disponible más información en la documentación de referencia para StyleOptions.

Geometrías disponibles para todos los elementos

  • clickable: si el valor es true, la característica recibe eventos del mouse y táctiles.
  • visible: si el valor es true, la característica es visible.
  • zIndex: todas las funciones se muestran en el mapa en el orden de sus zIndex, y los valores más altos se muestran frente a las funciones 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 mostrará al posar el puntero.
  • icon: icono que se mostrará para la geometría de puntos.
  • shape: define el mapa de imagen usado para la detección de aciertos.
  • title: texto de sustitución.

Geometrías de líneas disponibles

  • strokeColor: color del trazo. A excepción de los colores extendidos con nombre, se admiten todos los colores CSS3.
  • strokeOpacity: opacidad de trazo entre 0,0 y 1,0.
  • strokeWeight: ancho de trazo en píxeles.

Geometrías de polígonos disponibles

  • fillColor: color de relleno. A excepción de los colores extendidos con nombre, se admiten todos los colores CSS3.
  • fillOpacity: opacidad de relleno entre 0,0 y 1,0.
  • strokeColor: color del trazo. A excepción de los colores extendidos con nombre, se admiten todos los colores CSS3.
  • strokeOpacity: opacidad de trazo entre 0,0 y 1,0.
  • strokeWeight: ancho de trazo en píxeles.

Agregar controladores de eventos

Las funciones responden a eventos, como mouseup o mousedown. Puedes agregar receptores de eventos para que los usuarios puedan interactuar con los datos del mapa. En el ejemplo siguiente, se agrega un evento mouseover que muestra información acerca de la característica debajo el 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, independientemente de su tipo de geometría:

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

Se puede obtener más información sobre estos eventos en la documentación de reference de la clase google.maps.data.

Cambiar la apariencia de manera dinámica

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

En el ejemplo siguiente, se agrega un receptor de eventos para el evento click que actualiza la propiedad isColorful de la característica. 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();
});

Ver el ejemplo

Enviar comentarios sobre...

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