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

Agregar un mapa de Google con un marcador a tu sitio web

Introducción

En este instructivo, se muestra la manera de agregar un mapa simple de Google con un marcador a una página web. Está destinado a principiantes o personas con conocimientos intermedios de HTML y CSS, y un poco de JavaScript. Si deseas ver una guía avanzada para crear mapas, consulta la Guía del desarrollador.

A continuación, se muestra el mapa que crearás en este instructivo.

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

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Primeros pasos

Debes seguir estos tres pasos para crear un mapa de Google con un marcador en tu página web:

  1. Crea una página HTML.
  2. Agrega un mapa con un marcador.
  3. Obtén una clave de API.

Necesitas una navegador web. Elige uno conocido, como Google Chrome (recomendado), Firefox, Safari o Internet Explorer, según tu plataforma.

Paso 1: Crea una página HTML

Este es el código para una página web HTML básica:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Ten en cuenta que esta página es muy básica: tiene un nivel de encabezado tres (h3), un solo elemento div y un elemento style. Todos estos componentes se explican en la tabla más adelante. Puedes agregar cualquier contenido a la página web.

Pruébalo tú mismo

En la esquina superior derecha del código de ejemplo anterior hay dos botones. Haz clic en el botón de la izquierda para abrir el ejemplo en JSFiddle.

Analiza el código

En esta tabla, se explica cada sección del código anterior.

Código y descripción
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Crea una página HTML que conste de un encabezado y un cuerpo.
<h3>My Google Maps Demo</h3>

Agrega un nivel de encabezado tres arriba del mapa.
<div id="map"></div>

Define un área de la página para tu mapa de Google.
En este punto del instructivo, div aparece como un bloque gris porque aún no agregaste un mapa. Es gris debido al CSS que aplicaste. Mira la siguiente entrada.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

El elemento style en head define el tamaño de div en tu mapa.
Fija el ancho y alto de div en un valor superior a 0 px para que tu mapa sea visible.
En este caso, div tiene 500 píxeles de alto y 100% de ancho, para mostrarlo a lo ancho de tu página web. Fija background-color: grey en div para ver el área de tu mapa en una página web.

Paso 2: Agrega un mapa con un marcador

En esta sección, se muestra la manera de cargar la Google Maps JavaScript API en tu página web y de escribir JavaScript propio que use la API para agregar un mapa con un marcador.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Pruébalo tú mismo

En la esquina superior derecha del código de ejemplo anterior hay dos botones. Haz clic en el botón de la izquierda para abrir el ejemplo en JSFiddle.

Analiza el código

Observa que el código anterior ya no contiene el CSS que muestra div en gris. Esto se debe a que div ahora contiene un mapa.

En esta tabla, se explica cada sección del código anterior.

Código y descripción
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

El elemento script carga la API desde la URL especificada.
El parámetro callback ejecuta la función initMap cuando la API se carga por completo.
El atributo async permite al navegador seguir procesando el resto de la página mientras se carga la API.
El parámetro key contiene tu clave de API. No necesitas tu propia clave de API al probar este instructivo en JSFiddle. Consulta Paso 3: Obtener una clave de API para recibir instrucciones sobre cómo obtener tu propia clave de API posteriormente.
<script>
  function initMap() {
  }
</script>

La función initMap inicializa y agrega el mapa cuando se carga la página web. Usa una etiqueta script para incluir JavaScript propio que contenga la función initMap.
getElementById

Agrega esta función para buscar el div del mapa en la página web.
new google.maps.Map()

Agrega este nuevo objeto de mapas de Google para crear un mapa en el elemento div.
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

Agrega propiedades al mapa, como el centro y el nivel de zoom. Consulta la documentación para recibir información sobre otras opciones de propiedades.
La propiedad center comunica a la API el lugar en el que debe centrar el mapa. Las coordenadas del mapa se definen en este orden: latitud, longitud.
La propiedad zoom especifica el nivel de zoom del mapa. Zoom: 0 es el valor de zoom más bajo y muestra todo el planeta. Define un valor de zoom más alto para acercarte a la Tierra con mayores resoluciones.
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

Agrega este código para colocar un marcador en el mapa. El método position La propiedad position define la posición del marcador.

Paso 3: Obtener una clave de API

En esta sección, se explica la manera de autenticar tu app en la Google Maps JavaScript API con tu propia clave de API.

Sigue estos pasos para obtener una clave de API:

  1. Dirígete a Google API Console.
  2. Crea o selecciona un proyecto.
  3. Haz clic en Continue para habilitar la API y cualquier servicio relacionado.
  4. En la página Credentials, obtén una clave de API (y configura sus restricciones).

    Nota: Si ya tienes una clave de API sin restricciones o una clave con restricciones de navegador, puedes usarla.

  5. Para evitar el robo de cuota, protege tu clave de API siguiendo estas prácticas recomendadas.

  6. (Opcional) Habilita la facturación. Para obtener más información, consulta la sección de límites de uso.

  7. Copia todo el código del instructivo de esta página a tu editor de texto. Si no tienes un editor de texto, te recomendamos usar Notepad++ (para Windows); TextEdit (para macOS); y gedit, KWrite y otros (para máquinas Linux).
  8. Reemplaza el valor del parámetro key de la URL por tu propia clave de API (la que acabas de obtener).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Guarda este archivo con un nombre que termine en .html, como google-maps.html.

  10. Carga el archivo HTML a un navegador web: arrástralo de tu escritorio al navegador. En la mayoría de los sistemas operativos, otra alternativa es hacer doble clic en el archivo.

Consejos y solución de problemas

  • Usa la interfaz de JSFiddle para mostrar código HTML, CSS y JavaScript en paneles independientes. Puedes ejecutar el código y mostrar los resultados en el panel Results*.
  • Puedes modificar determinadas opciones, como los estilos y las propiedades, para personalizar el mapa. Para obtener más información sobre cómo personalizar los mapas, consulta (/maps/documentation/javascript/adding-a-google-map) de la [Maps JavaScript API].
  • Usa la consola de herramientas de desarrollador de tu navegador web para probar y ejecutar tu código, solucionar problemas de él y leer informes de error.

    Combinación de teclas para abrir la consola en Chrome: Comando+Opción+J (en Mac) o Control+Mayúsculas+J (en Windows).

Enviar comentarios sobre...

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