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

Importar datos a mapas

Información general

Aprende a importar datos GeoJSON desde un origen local o remoto y muéstralos en tu mapa. En este instructivo se usa el siguiente mapa para ilustrar varias técnicas de importación de datos a mapas.

En la siguiente sección se muestra el código completo que necesitas para crear el mapa en este instructivo.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      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>

Pruébalo

Desplázate a la esquina superior derecha del bloque de código para copiar el código o abrirlo en JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Cargar datos

En esta sección se muestra la manera de cargar datos desde los mismos dominios que tu aplicación Maps JavaScript API o desde otro dominio.

Cargar datos desde el mismo dominio

El Nivel de datos de Google Maps proporciona un contenedor para datos geoespaciales arbitrarios (incluidos GeoJSON). Si tus datos se encuentran en un archivo alojado en el mismo dominio que tu aplicación de la Maps JavaScript API, puedes cargarlos usando el método map.data.loadGeoJson(). El archivo debe encontrarse en el mismo dominio, pero puedes alojarlo en un subdominio diferente. Por ejemplo, puedes crear una solicitud para files.example.com desde www.example.com.

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

Cargar datos de diferentes dominios

También puedes solicitar datos de un dominio que no sea el tuyo siempre que la configuración del dominio admita esa solicitud. El estándar para este permiso se denomina uso compartido de recursos de diferentes orígenes (CORS). Si un dominio tiene solicitudes en diferentes dominios, en su encabezado de respuesta se debe incluir la siguiente declaración:

Access-Control-Allow-Origin: *

Usa Chrome Developer Tools (DevTools) para determinar si un dominio tiene CORS habilitado.

La carga de datos desde un dominio como este es la misma que la carga de JSON desde el mismo dominio:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Solicitar JSONP

El dominio de destino debe admitir solicitudes para JSONP a fin de poder usar esta técnica.

Para solicitar JSONP, usa createElement() para agregar una etiqueta script al encabezado de tu documento.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Cuando se ejecuta la secuencia de comandos, el dominio de destino pasa los datos como argumento a otra secuencia de comandos, generalmente llamada callback(). El dominio de destino define el nombre de la secuencia de comandos del callback, que es el primer nombre que aparece en la página cuando cargas la URL de destino en un navegador.

Por ejemplo, carga http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp en la ventana de tu navegador para revelar el nombre del callback como eqfeed_callback.

Debes definir la secuencia de comandos del callback en tu código:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Usa el método addGeoJson() para disponer los datos GeoJSON analizados en el mapa.

Aplicar ajustes de estilo a los datos

Puedes cambiar el aspecto de tus datos agregando GeoJSON a un objeto Map. Lee la guía para desarrolladores para obtener más información sobre cómo aplicar estilo a tus datos.

Obtén más información

  • GeoJSON es un formato abierto muy utilizado para codificar datos geográficos, basado en JSON (JavaScript Object Notation). Las herramientas y los métodos de JavaScript designados para los datos JSON también funcionan con GeoJSON. Para obtener más información, lee la guía del desarrollador .
  • JSONP significa JSON con relleno. Es un método de comunicación que se usa en los programas JavaScript que se ejecutan en navegadores web para solicitar datos a un servidor en un dominio diferente.

Enviar comentarios sobre...

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