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

Primeros pasos

Público

La presente documentación está diseñada para personas que estén familiarizadas con la programación mediante JavaScript y conceptos de programación orientados al objeto. También debes estar familiarizado con Google Maps desde el punto de vista del usuario. Existen muchos tutoriales de JavaScript disponibles en la Web.

Esta documentación conceptual está diseñada para que puedas comenzar rápidamente a explorar y desarrollar aplicaciones con la Google Maps JavaScript API. También publicamos la referencia de Google Maps JavaScript API.

Hello, World:

La manera más sencilla de comenzar a conocer la Google Maps JavaScript API es ver un ejemplo simple. En la página web siguiente se muestra un mapa centrado en Sídney, Nueva Gales del Sur, Australia:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
<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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <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'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Ver el ejemplo (map-simple.html)

Incluso en este ejemplo simple, deben observarse algunos aspectos:

  1. Se declara la apicación como HTML5 a través de la declaración <!DOCTYPE html>.
  2. Se crea un elemento div con el nombre “map” para que contenga el mapa.
  3. Se define una función JavasScript que crea un mapa en el elemento div.
  4. Se carga la Maps JavaScript API usando una etiqueta script.

Estos pasos se explican a continuación:

Cómo declarar tu aplicación como HTML5

Te recomendamos realizar una declaración DOCTYPE con el valor “true” dentro de tu aplicación web. Dentro de los ejemplos, se declaran las aplicaciones como HTML5 usando la declaración DOCTYPE HTML5, como se muestra a continuación:

<!DOCTYPE html>

La mayoría de los navegadores actuales representarán contenido de esta declaración DOCTYPE en el “modo estándar”, lo cual significa que tu aplicación se adecuará más a los diferentes navegadores. La declaración DOCTYPE también está diseñada para desaparecer de manera armoniosa; los navegadores que no la identifiquen la ignorarán y usarán el “modo de interpretación” para mostrar su contenido.

Ten en cuenta que parte de la CSS que funciona dentro del modo de interpretación no es válida en el modo de estándares. En términos específicos, todos los tamaños basados en porcentajes deben heredar sus valores de elementos de bloque primarios, y si cualquiera de estos antecesores no especifica un tamaño, se supone que tienen un tamaño de 0 x 0 píxeles. Por ese motivo, se incluye la siguiente declaración <style>:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

La declaración CSS indica que el <div> que contiene el mapa (con map de id.) debe abarcar el 100% de la altura del cuerpo HTML. Ten en cuenta deben declararse de manera específica esos porcentajes para <body> y <html>.

Carga de la Google Maps JavaScript API

Para cargar la Google Maps JavaScript API, usa una etiqueta script como la que aparece en el siguiente ejemplo:
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

La dirección URL que se incluye en la etiqueta script es la ubicación de un archivo de JavaScript que carga todos los símbolos y las definiciones que necesitas para usar la Maps JavaScript API. Se necesita esta etiqueta script.

El atributo async permite que el navegador represente el resto de tu sitio web mientras se carga la Maps JavaScript API. Cuando la API esté lista, llamará a la función especificada usando el parámetro callback.

El parámetro key contiene la clave de API de tu aplicación. Para obtener más información, consulta Obtener una clave.

Nota: Los clientes del Google Maps APIs Premium Plan pueden usar una clave de API o un ID de cliente válido al cargar la API. Obtén más información sobre parámetros de autenticación para clientes del Premium Plan.

HTTPS o HTTP

Creemos que la seguridad en la Web es un aspecto muy importante y recomendamos usar el protocolo HTTPS siempre que sea posible. Como parte de nuestros esfuerzos por lograr que la Web sea un lugar más seguro, hemos garantizado la disponibilidad de todas las Maps JavaScript API a través de HTTPS. El uso de cifrado HTTPS aporta más seguridad a tu sitio y lo hace más resistente contra las intromisiones o la manipulación.

Recomendamos cargar la Maps JavaScript API mediante HTTPS usando la etiqueta <script> proporcionada previamente.

Si es necesario, puedes cargar la Maps JavaScript API mediante HTTP solicitando http://maps.googleapis.com/, o bien http://maps.google.cn en el caso de los usuarios de China.

Bibliotecas

Al cargar la Maps JavaScript API a través de la URL, de manera opcional puedes cargar bibliotecas adicionales mediante el parámetro de dirección URL libraries. Las bibliotecas son módulos de código que proporcionan una funcionalidad adicional a la Maps JavaScript API, pero no se cargan a menos que lo solicites específicamente. Para obtener más información, consulta la sección de bibliotecas de la Maps JavaScript API.

Cómo cargar la API de manera sincrónica

En la etiqueta script que carga la Maps JavaScript API, es posible omitir el atributo async y el parámetro callback. Esto hará que se bloquee la carga de la API hasta que se complete la descarga.

Probablemente se demore la carga de tu página. Sin embargo, implica que puedes escribir etiquetas de script posteriormente suponiendo que la API ya está cargada.

Elementos de DOM de mapas

<div id="map"></div>

A fin de que el mapa aparezca en una página web, se debe reservar un lugar para él. Comúnmente, esto se hace creando un elemento div y obteniendo una referencia a este en el modelo de objeto de documento (DOM) del navegador.

En el ejemplo anterior, se usó la CSS para fijar la altura del elemento “div” del mapa en “100%”. Con esto se producirá una expansión para adecuar el tamaño en dispositivos móviles. Es posible que debas ajustar los valores de ancho y alto según el tamaño de pantalla y el relleno del navegador. Ten en cuenta que los elementos “div” generalmente reciben su ancho del elemento que los contiene, y que en general el valor de altura de estos elementos es “0”. Por este motivo, siempre debes configurar una altura en el elemento <div> de manera explícita.

Opciones de mapas

Hay dos opciones obligatorias para todos los mapas: center y zoom.

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

Niveles de zoom

La resolución inicial con la que debe mostrarse el mapa se configura a través de la propiedad zoom, en la cual 0 corresponde a un mapa de la Tierra con el máximo zoom de alejamiento, y con niveles de zoom más altos se aplica zoom de acercamiento a una mayor resolución. Especifica el nivel de zoom como un número entero.

zoom: 8

Para ofrecer un mapa de toda la Tierra en una imagen única, sería necesitaría un mapa enorme o un mapa muy pequeño con una resolución muy baja. Como resultado, las imágenes de mapas de Google Maps y la Maps JavaScript API se dividen en “mosaicos” de mapas y “niveles de zoom”. A bajos niveles de zoom, un conjunto reducido de mosaicos de mapas abarcan un área amplia. A niveles de zoom superiores, los mosaicos tienen mayor resolución y abarcan un área más reducida. En la siguiente lista, se muestra el nivel aproximado de detalle que puedes esperar ver en cada nivel de zoom:

  • 1: Mundo
  • 5: Tierra firme y continente
  • 10: Ciudad
  • 15: Calles
  • 20: Edificios

Las tres imágenes siguientes reflejan la misma ubicación de Tokio con niveles de zoom 0, 7 y 18.

Para obtener información sobre la manera en que la Maps JavaScript API carga mosaicos según el nivel de zoom actual, consulta Coordenadas de mosaicos en la documentación sobre MapTypes.

El objeto “Map”

map = new google.maps.Map(document.getElementById("map"), {...});

La clase JavaScript que representa un mapa es la clase Map. Los objetos de esta clase definen un solo mapa en una página. (Puedes crear más de una instancia de esta clase; cada objeto definirá un mapa separado en la página). Se crea una nueva instancia de esta clase usando el operador de JavaScript new.

Al crear una nueva instancia de un mapa, se especifica en la página un elemento <div> de HTML como contenedor para dicho mapa. Los nodos HTML son hijos del objeto document de JavaScript, y se obtiene una referencia a este elemento a través del método document.getElementById().

Este código define una variable (llamada map) y la asigna a un nuevo objeto Map. La función Map() es conocida como constructor y a continuación se muestra su definición:

Constructor Descripción
Map(mapDiv:Node, opts?:MapOptions ) Crea un nuevo mapa dentro del contenedor HTML en cuestión (que normalmente es un elemento DIV) mediante la transferencia de parámetros (opcionales).

Solución de problemas

Para ayudarte a dejar en condiciones el código de tus mapas, Brendan Kenny y Mano Marks señalan errores comunes y la manera de resolverlos en este video.

Si tu código no funciona:

  • Busca errores de ortografía. Recuerda que JavaScript es un lenguaje en el que se distinguen mayúsculas y minúsculas.
  • Verifica aspectos básicos. Algunos de los problemas más comunes se producen en el momento inicial de la creación de mapas. Por ejemplo:
    • Controla que hayas especificado las propiedades zoom y center en las opciones de tu mapa.
    • Asegúrate de haber declarado un elemento “div” según el cual el mapa aparecerá en pantalla.
    • Asegúrate de que se haya especificado una altura para el elemento “div” del mapa. De manera predeterminada, al crearse, la altura de los elementos “div” es “0”, con lo cual son invisibles.
    Consulta los ejemplos para acceder a implementaciones de referencia.
  • Para identificar problemas, usa un depurador de JavaScript como el que está disponible en las Herramientas para desarrolladores de Chrome. Comienza la búsqueda de errores en la consola JavaScript.
  • Publica tus preguntas en Stack Overflow. En la página de soporte se encuentran disponibles pautas sobre la manera de publicar buenas preguntas.

Enviar comentarios sobre…

Google Maps JavaScript API
Google Maps JavaScript API
¿Necesitas ayuda? Visita nuestra página de asistencia.