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

Ventanas de información

  1. Introducción
  2. Agregar una ventana de información
  3. Abrir una ventana de información
  4. Cerrar una ventana de información
  5. Mover una ventana de información

Introducción

Los objetos InfoWindow muestran contenido (generalmente, texto o imágenes) dentro de una ventana emergente que aparece en sobre el mapa, en una ubicación determinada. La ventana de información tiene un área de contenido y un tallo cónico. La punta del tallo se conecta a una ubicación especificada del mapa.

Normalmente, las ventanas de información se adjuntan a un marcador. No obstante, según lo descrito en la sección sobre adición de ventanas de información, a continuación, estas también pueden adjuntarse a una latitud o longitud específicas.

En términos generales, las ventanas de información son una clase de superposición. Para obtener información sobre otros tipos de superposiciones, consulta Cómo dibujar en el mapa.

Agregar una ventana de información

El constructor de objetos InfoWindow toma un literal de objeto InfoWindowOptions, que especifica los parámetros iniciales para la visualización de la ventana de información.

El literal de objeto InfoWindowOptions contiene los siguientes campos:

  • content contiene una cadena de texto o un nodo DOM que deben mostrarse en la ventana de información.
  • pixelOffset contiene un offset de la esquina de la ventana de información a la ubicación en la que se fija la ventana. En la práctica, no debe ser un requisito especificar este campo. Puedes dejar el valor predeterminado.
  • position contiene el objeto LatLng al que se fija esta ventana de información. Nota: Puede adjuntarse un objeto InfoWindow a un objeto Marker (en cuyo caso la posición se basa en la ubicación del marcador) o al mapa, en un objeto LatLng especificado. Una manera de recuperar un LatLng consiste en usar el servicio de geocodificación. Al abrirse una ventana de información en un marcador, position se actualizará en forma automática.
  • maxWidth especifica el ancho máximo de la ventana de información en píxeles. De manera predeterminada, una ventana de información se expande para adecuarse al contenido y, si abarca todo el mapa, ajusta automáticamente el texto. Si agregas un elemento maxWidth, la ventana de información se ajustará automáticamente para aplicar el ancho especificado. Si esta alcanza el ancho máximo y hay espacio vertical en la pantalla, puede expandirse verticalmente.

El objeto InfoWindow puede contener una cadena de texto, un fragmento de HTML o un elemento de DOM. Para configurar el contenido, especifícalo dentro de InfoWindowOptions o llama a setContent() en InfoWindow en forma explícita.

Si deseas asignar tamaño explícitamente al contenido, puedes hacerlo en un elemento <div> y aplicar ajustes de estilo a <div> con CSS. También puedes usar CSS para habilitar el desplazamiento. Ten en cuenta que si no habilitas el desplazamiento y el contenido excede el espacio disponible en la ventana de información, es posible que el contenido se salga de la ventana de información.

Abrir una ventana de información

Cuando creas una ventana de información esta no aparece automáticamente en el mapa. Para que la ventana de información sea visible, debes llamar al método open() en la ventana InfoWindow y pasarle el Map en el cual debe abrirse, y, de manera opcional, el Marker con el que debe fijarse. Si no se proporcionan marcadores, la ventana de información se abrirá donde lo establezca su propiedad position.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<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 displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

Ver el ejemplo (infowindow-simple.html).

En el siguiente ejemplo, se configura el elemento maxWidth de una ventana de información: Ver el ejemplo (infowindow-simple-max.html).

Cerrar una ventana de información

De manera predeterminada, los objetos InfoWindow permanecen abiertos hasta que el usuario haga clic en el control de cierre (cruz de la esquina superior derecha de la ventana de información). Si lo deseas, puedes cerrar la ventana de información en forma explícita llamando a su método close().

Mover una ventana de información

Existen dos maneras de modificar la ubicación de una ventana de información:

  • llamar a setPosition() en la ventana de información, o
  • adjuntar la ventana de información a un nuevo marcador en el que se use el método InfoWindow.open(). Nota: Si llamas a open() sin pasar un marcador, el objeto InfoWindow usará la posición especificada a través del literal de objeto InfoWindowOptions tras la construcción.

Enviar comentarios sobre...

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