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

Autocompletado para direcciones y términos búsqueda

Introducción

El autocompletado es una función de la biblioteca de Places de la Google Maps JavaScript API. Puedes usar el autocompletado para proporcionar a tus aplicaciones el comportamiento de escritura anticipada del campo de búsqueda de Google Maps. Cuando un usuario comienza a escribir una dirección, la función de autocompletado termina la tarea.

Primeros pasos

Antes de usar la biblioteca de Places de la Google Maps JavaScript API, debes asegurarte de que Google Places API Web Service esté habilitada en la Google API Console, en el mismo proyecto que configuraste para la Google Maps JavaScript API.

Para ver tu lista de API habilitadas:

  1. Ingresa a Google API Console.
  2. Haz clic en el botón Select a project, luego selecciona el mismo proyecto que configuraste para la Google Maps JavaScript API y haz clic en Open.
  3. En la lista de API del Panel de control, busca Google Places API Web Service.
  4. Si ves la API en la lista, no necesitas hacer nada más. Si la API no está en la lista, habilítala:
    1. En la parte superior de la página, selecciona ENABLE API para mostrar la pestaña Library. Como alternativa, en el menú lateral izquierdo, selecciona Library.
    2. Busca Google Places API Web Service y luego selecciónala en la lista de resultados.
    3. Selecciona ENABLE. Cuando finalice el proceso, Google Places API Web Service aparecerá en la lista de API del Panel de control.

Cargar la biblioteca

El servicio Places es una biblioteca independiente, separada del código principal Maps JavaScript API. Para usar la funcionalidad contenida en esta biblioteca, primero debes cargarla usando el parámetro libraries en la URL de arranque de Maps API:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Para obtener más datos, consulta la información general sobre bibliotecas.

Límites y políticas de uso

Cuotas

La Google Places API Web Service y el autocompletado de sitios comparten una cuota de uso, tal como se describe en la documentación de límites de uso para Google Places API Web Service. Estos límites de uso también se aplican cuando usas la Places Library in the Google Maps JavaScript API. El uso diario se calcula como la suma de las consultas de cliente y servidor combinadas.

Políticas

El uso de la Places Library in the Google Maps JavaScript API debe cumplir con las políticas que se describen para la Google Places API Web Service.

Resumen de clases

La API ofrece dos tipos de widgets de autocompletado que puedes agregar a través de las clases Autocomplete y SearchBox, respectivamente. Además, puedes usar la clase AutocompleteService para recuperar resultados de autocompletado de manera programática.

A continuación, se ofrece un resumen de las clases disponibles:

  • Autocomplete agrega un campo de ingreso de texto a tu página web y controla el ingreso de caracteres de este campo. A medida que el usuario introduce texto, el autocompletado devuelve predicciones de sitios con la forma de una lista de selección desplegable. Cuando el usuario selecciona un sitio de la lista, se devuelve al objeto Autocomplete información sobre el sitio y tu aplicación puede recuperarla. Consulta la información detallada a continuación.
  • SearchBox agrega un campo de ingreso de texto a tu página web de una manera muy similar a la de Autocomplete. Las diferencias se muestran a continuación:
    • La diferencia principal se encuentra en los resultados que aparecen en la lista de selección. SearchBox proporciona una lista extendida de predicciones, en la que se pueden incluir sitios (según lo definido en la Google Places API) y términos de búsqueda sugeridos. Por ejemplo, si el usuario escribe “pizza en nueva”, en la lista de selección puede incluirse “pizza en Nueva York, NY” además de los nombres de varias pizzerías.
    • SearchBox ofrece menos opciones de restricción de búsqueda que Autocomplete. El primero permite restringir la búsqueda según de un objeto LatLngBounds determinado. El segundo permite restringir la búsqueda según un tipo de país y sitio en particular, y también configurar los límites.
    Consulta la información detallada a continuación.
  • Puedes crear un objeto AutocompleteService para recuperar predicciones de manera programática. Llama a getPlacePredictions() para recuperar sitios que coincidan o llama a getQueryPredictions() para recuperar sitios que coincidan y términos de búsqueda sugeridos. Nota: AutocompleteService no agrega controles de IU. En lugar de ello, los métodos anteriores devuelven un arreglo de objetos de predicción. Cada objeto de predicción contiene el texto de la predicción e información de referencia y detalles sobre la coincidencia entre el resultado y la entrada del usuario. Consulta la información detallada a continuación.

En el resto de esta página se proporcionan ejemplos de casos de uso e información detallada sobre el uso de las clases anteriores.

Cómo usar el autocompletado

En este video se muestra la manera de usar Autocomplete, y se incluyen demostraciones y ejemplos de código.

Ejemplo: Autocompletado para formularios de dirección

¿En tu aplicación se incluye un formulario de dirección, como los de dirección de envío de un pedido en línea, dirección de facturación de una tarjeta de crédito o reserva de taxis? El autocompletado puede ayudar a los usuarios a proporcionar los detalles.

En la figura 1 se muestran un campo de texto de autocompletado y la lista de selección de predicciones de sitios proporcionadas a medida que el usuario introduce la solicitud de búsqueda:

Campo de texto de autocompletado y lista de selección de predicciones     de sitios proporcionadas a medida que el usuario introduce la solicitud de búsqueda.
Figura 1: Campo de autocompletado de texto y lista de selección.

Cuando el usuario elige una dirección en la lista de selección, tu aplicación puede completar el formulario de dirección:

Formulario de dirección completo.
Figura 2: Formulario de direcciones completo.

Observa un formulario de direcciones en acción: Ver el ejemplo (places-autocomplete-addressform.html).

Continúa leyendo para ver la manera de agregar el autocompletado a tu página web.

Ejemplo: Autocompletado para controles de mapas

El autocompletado resulta útil para solicitar información a los usuarios como parte de una aplicación de mapa, como se muestra en la figura 3:

Campo de texto de autocompletado en el que se muestran una búsqueda parcial en una ciudad     y sitios que coinciden.
Figura 3: Campo de autocompletado de texto y lista de selección.

Obsérvalo en acción: Ver el ejemplo (places-autocomplete-hotelsearch.html).

Continúa leyendo para ver la manera de agregar el autocompletado a tu página web.

Agregar autocompletado para sitios y direcciones

Autocomplete crea un campo de entrada de texto en tu página web, proporciona predicciones de sitios en una lista de selección de IU y devuelve información detallada sobre lugares en respuesta a una solicitud de getPlace(). Cada entrada de la lista de selección corresponde a un lugar (según lo definido en la Google Places API).

El constructor de Autocomplete toma dos argumentos:

  • Un elemento input de HTML del tipo text. El servicio de autocompletado controlará este campo de entrada y le adjuntará sus resultados.
  • Un argumento options que puede contener las siguientes propiedades:
    • Un arreglo de types especifica un tipo explícito o un conjunto de tipos, según los tipos admitidos que se indican a continuación. Si no se especifica nada, se devolverán todos los tipos. En general, solo se permite un tipo. Como excepción, puedes combinar con seguridad los tipos geocode y establishment, pero debes tener en cuenta que esto tendrá el mismo efecto que si no especificaras ningún tipo. Los tipos admitidos son los siguientes:
      • geocode indica al servicio de Google Places que devuelva solo resultados de geocodificación, en lugar de resultados de negocios.
      • address indica al servicio de Google Places que devuelva solo resultados de geocodificación con una dirección precisa.
      • establishment indica al servicio de Google Places que devuelva solo resultados de negocios.
      • El conjunto de tipos (regions) indica al servicio de Google Places que devuelva todos los resultados que coincidan con los siguientes tipos:
        • locality
        • sublocality
        • postal_code
        • country
        • administrative_area1
        • administrative_area2
      • el grupo de tipos (cities) indica al servicio de Goolge Places que devuelva resultados que coincidan con locality o administrative_area3.
    • bounds es un objeto google.maps.LatLngBounds en el que se especifica el área en la que deben buscarse sitios. Los resultados se restringen, aunque no de manera exclusiva, conforme a lugares dentro de estos límites.
    • componentRestrictions: puede usarse para restringir resultados conforme a grupos específicos. Actualmente, puedes usar componentRestrictions para filtrar por país. El país debe pasarse como un código de país de dos caracteres, conforme a la norma ISO 3166-1-Alpha-2.
    • placeIdOnly solo se puede usar para indicar al widget Autocomplete que obtenga solo los ID de sitio. Al llamar a getPlace() en el objeto Autocomplete, el objeto PlaceResult que se habilita solo tendrá configuradas las propiedades place id, types y name. Puedes usar el ID de sitio que se muestra con las llamadas a los servicios de sitios, geocodificación, indicaciones o matriz de distancia.

Configurar restricciones y límites de área de búsqueda para autocompletado

Puedes restringir los resultados de autocompletado para priorizar una ubicación o área aproximadas, de las siguientes maneras:

  • Configurar los límites al crearse el objeto Autocomplete.
  • Cambiar los límites en un objeto Autocomplete existente.
  • Configurar los límites del viewport del mapa.
  • Restringir la búsqueda a un país específico.

Se proporciona información detallada en las secciones siguientes.

Configurar los límites al crearse el objeto Autocomplete

En el ejemplo siguiente se usan las opciones bounds y types para solicitar negocios del tipo “establecimiento”, y se priorizan las que se encuentran dentro del área geográfica específica.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Cambiar los límites en un objeto Autocomplete existente

Llama a setBounds() para cambiar el área de búsqueda en un objeto Autocomplete existente.

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Ver el ejemplo (places-autocomplete-addressform.html).

Configurar los límites del viewport del mapa

Usa bindTo() para restringir los resultados al viewport del mapa, aún cuando dicho viewport cambie.

autocomplete.bindTo('bounds', map);

Ver el ejemplo (places-autocomplete.html).

Restringir la búsqueda a un país específico

Usa la opción componentRestrictions para restringir la búsqueda de autocompletado a un país en particular. En el código siguiente se restringen los resultados a ciudades de Francia.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

En el ejemplo siguiente se permite al usuario seleccionar un país y se restringen los resultados de autocompletado al país mencionado.

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

Ver el ejemplo (places-autocomplete-hotelsearch.html).

Personalizar el texto de marcadores de posición para autocompletado

De manera predeterminada, el campo de texto creado por el servicio de autocompletado contiene texto de marcadores de posición estándares. Para modificar el texto, configura el atributo placeholder en el elemento input:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

Nota: La localización del marcador de posición predeterminado se establece automáticamente. Si especificas tu propio valor de marcadores de posición, debes administrar la localización de dicho valor en tu aplicación. Para obtener información sobre la manera en que la Google Maps JavaScript API selecciona el idioma que debe usarse, lee la documentación sobre la localización.

Obtener información sobre sitios a partir del autocompletado

Cuando un usuario selecciona un sitio entre las predicciones adjuntadas al campo de texto de autocompletado, el servicio activa un evento place_changed. Puedes llamar a getPlace() en el objeto Autocomplete para recuperar un objeto PlaceResult.

De manera predeterminada, la función autocompletar te proporcionará la dirección completa en una única línea de texto. En el caso de los formularios de dirección, la visualización estructurada de la información resulta útil. Puedes usar Autocomplete.getPlace() para recuperar toda la información de cada predicción de autocompletado, incluida la dirección estructurada.

Si usas la opción placeIdOnly, el objeto Autocomplete no obtendrá detalles del sitio, ya que el objeto PlaceResult solo tiene configuradas las propiedades place_id, types y name.

Para obtener información de un sitio, obtén un objeto PlaceResult llamando a getPlace() en el objeto Autocomplete cuando obtengas el evento place_changed. Luego puedes usar geocodificación para obtener las coordenadas de la ubicación, o el servicio de Places para obtener más información sobre el sitio seleccionado.

Para obtener más información sobre el objeto PlaceResult, consulta la documentación sobre resultados de información de sitios.

En el ejemplo siguiente, se usa la función de autocompletado para completar los campos de un formulario de dirección.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

Ver el ejemplo (places-autocomplete-addressform.html).

SearchBox permite a los usuarios realizar una búsqueda geográfica basada en texto, como “pizza en Nueva York” o “zapaterías cerca de la calle robson”. Puedes adjuntar SearchBox a un campo de texto. A medida que el usuario introduzca texto, el servicio devolverá predicciones en una lista de selección desplegable.

SearchBox proporciona una lista extendida de predicciones, en la que se pueden incluir sitios (según lo definido en la Google Places API) y términos de búsqueda sugeridos. Por ejemplo, si el usuario escribe “pizza en nueva”, en la lista de selección puede incluirse “pizza en Nueva York, NY” además de los nombres de varias pizzerías. Cuando el usuario selecciona un sitio de la lista, se devuelve al objeto SearchBox información sobre el sitio y tu aplicación puede recuperarla.

El constructor de SearchBox toma dos argumentos:

  • Un elemento input de HTML del tipo text. El servicio de SearchBox controlará este campo de entrada y le adjuntará sus resultados.
  • Un argumento options que puede contener la propiedad bounds: bounds es un objeto google.maps.LatLngBounds en el que se especifica el área en la que deben buscarse sitios. Los resultados se restringen, aunque no de manera exclusiva, conforme a lugares dentro de estos límites.

En el código siguiente se usa el parámetro bounds para restringir los resultados a sitios de un área geográfica en particular, especificada a través de coordenadas de latitud y longitud.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Cambiar el área de búsqueda de SearchBox

Para cambiar el área de búsqueda de un objeto SearchBox existente, llama a setBounds() en SearchBox y pasa el objeto LatLngBounds correspondiente.

Ver el ejemplo (places-searchbox.html).

Obtener información de SearchBox

Cuando el usuario selecciona un elemento entre las predicciones adjuntadas al cuadro de búsqueda, el servicio activa un evento place_changed. Puedes llamar a getPlace() en el objeto SearchBox para recuperar un arreglo que contiene varias predicciones, cada una de las cuales representa un objeto PlaceResult.

Para obtener más información sobre el objeto PlaceResult, consulta la documentación sobre resultados de información de sitios.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Ver el ejemplo (places-searchbox.html).

Aplicar ajustes de estilo a los widgets de autocompletado y SearchBox

De manera predeterminada, los elementos de IU proporcionados por Autocomplete y SearchBox reciben ajustes de estilo en un mapa de Google. Probablemente te convenga ajustar el estilo a tu propio sitio. Están disponibles las siguientes clases de CSS: Todas las clases que se mencionan a continuación se aplican a los widgets de Autocomplete y SearchBox.

Ilustración gráfica de las clases de CSS para los widgets de Autocomplete y       SearchBox
Clases de CSS para los widgets de Autocomplete y SearchBox
Clase de CSS Descripción
pac-container Elemento visual que contiene la lista de predicciones devueltas por el servicio de autocompletado de sitios. Esta aparece en formato desplegable debajo de los widgets de Autocomplete o SearchBox.
pac-icon Icono que aparece a la izquierda de cada elemento de la lista de predicciones.
pac-item Elemento de la lista de predicciones proporcionadas por el widget de Autocomplete o SearchBox.
pac-item:hover La figura que aparece cuando el usuario posa el puntero del mouse sobre un elemento.
pac-item-selected La figura que aparece cuando el usuario selecciona un elemento a través del teclado. Nota: Los elementos seleccionados formarán parte de esta clase y de la clase pac-item.
pac-item-query Intervalo dentro de una clase pac-item que representa la parte principal la predicción. En el caso de las ubicaciones geográficas, contiene un nombre de sitio, como “Sídney”, o un nombre y un número de una calle, como “10 King Street”. En el caso de búsquedas basadas en texto, como “pizza en New York”, contiene todo el texto de la solicitud. De manera predeterminada, el color de pac-item-query es negro. Si existe texto adicional en pac-item, se encuentra fuera de pac-item-query y recibe sus ajustes de estilo de pac-item. Su color predeterminado es el gris. El texto adicional normalmente es una dirección.
pac-matched Parte de la predicción devuelta que coincide con la entrada del usuario. De manera predeterminada, este texto coincidente se resalta en negrita. Ten en cuenta que el texto coincidente puede hallarse donde sea dentro de pac-item. No necesariamente forma parte de pac-item-query, y podría hallarse parcialmente dentro de pac-item-query y parcialmente en el texto restante en pac-item.

Recuperar predicciones del servicio de autocompletado

Para recuperar predicciones de manera programática, usa la clase AutocompleteService. AutocompleteService no agrega controles de IU. En lugar de ello, devuelve un arreglo de objetos de predicción, cada uno de los cuales contiene el texto de la predicción e información de referencia y detalles sobre la coincidencia entre el resultado y la entrada del usuario. Esto resulta útil si deseas tener sobre la interfaz de usuario un control superior al que ofrecen Autocomplete y SearchBox.

AutocompleteService exhibe los siguientes métodos:

  • getPlacePredictions() devuelve predicciones de sitios. Nota: Según lo definido en la Google Places API, un “sitio” puede ser un establecimiento, una ubicación geográfica o un punto de interés destacado.
  • getQueryPredictions() devuelve una lista extendida de predicciones, en la que se pueden incluir sitios (según lo definido en la Google Places API) y términos de búsqueda sugeridos. Por ejemplo, si el usuario escribe “pizza en nueva”, en la lista de selección puede incluirse “pizza en Nueva York, NY” además de los nombres de varias pizzerías.

Los métodos anteriores devuelven un arreglo de cinco objetos de predicción con la siguiente forma:

  • description es la predicción coincidente.
  • id contiene un identificador único que designa el sitio. Este identificador no se puede usar para recuperar información acerca del sitio, pero sí para consolidar datos acerca del sitio y verificar la identidad de un sitio entre búsquedas independientes. Dado que los id. pueden cambiar ocasionalmente, se recomienda comparar el id. guardado para un sitio con el id. devuelto en las solicitudes de detalles posteriores para el mismo sitio, y actualizarlo si fuera necesario. Nota: id ha quedado en desuso a favor de place_id, conforme al aviso sobre desuso de esta página.
  • matched_substrings contiene un conjunto de subcadenas en la descripción que coinciden con elementos de la entrada del usuario. Esto resulta útil para resaltar esas subcadenas de tu aplicación. En muchos casos, la consulta aparecerá como subcadena del campo description.
    • length es la duración de la subcadena.
    • offset es el desplazamiento de caracteres, medido desde el principio de la cadena de descripción, en el que aparece la subcadena coincidente.
  • place_id es un identificador textual que identifica de forma exclusiva un sitio. Para recuperar información sobre el sitio, pasa este identificador en el campo placeId de una solicitud de detalles del sitio. Obtén más información sobre la manera de hacer referencia a un sitio con un id. de sitio
  • reference contiene un token que se puede usar para consultar el servicio de detalles en el futuro. Este token puede ser diferente de la referencia utilizada en la solicitud para el servicio de detalles. Se recomienda actualizar con frecuencia las referencias almacenadas para los sitios. Si bien este token identifica de forma exclusiva al sitio, no ocurre lo mismo de forma inversa: un sitio puede tener muchos tokens de referencia válidos. Nota: reference ha quedado en desuso a favor de place_id, conforme al aviso sobre desuso de esta página.
  • terms es un arreglo que contiene elementos de la consulta. En el caso de un sitio, cada elemento representará una parte de la dirección.
    • offset es el desplazamiento de caracteres, medido desde el principio de la cadena de descripción, en el que aparece la subcadena coincidente.
    • value es el término coincidente.

En el ejemplo siguiente se ejecuta una solicitud de predicción de consulta de la frase “pizza cerca” y se muestra el resultado en una lista.

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</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;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

Ver el ejemplo (places-queryprediction.html).

Enviar comentarios sobre...

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