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

Biblioteca de sitios

Información general

Las funciones de la biblioteca JavaScript de Google Places permiten que tu aplicación busque sitios (definidos en esta API como establecimientos, ubicaciones geográficas o puntos de interés destacados) dentro de un área definida, como los límites de un mapa o alrededor de un punto fijo.

La Google Places API ofrece una función de autocompletado que puedes usar para dar 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. Para obtener más información, consulta la documentación sobre la función de autocompletado.

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.

Búsquedas de sitios

Con el servicio de Places, puedes hacer cuatro clases de búsquedas:

  • La búsqueda de sitios cercanos devuelve una lista de sitios cercanos sobre la base de la ubicación de un usuario.
  • La búsqueda de texto devuelve una lista de sitios cercanos sobre la base de la ubicación de un usuario (p. ej., "Pizza»).
  • La búsqueda por radar devuelve una lista grande de sitios dentro de un radio de búsqueda especificado, aunque con menos detalle que la búsqueda de sitios cercanos o la búsqueda de texto.
  • Las solicitudes de detalles del sitio devuelven información más detallada sobre un sitio específico, incluidas las reseñas del usuario.

En la información devuelta pueden incluirse establecimientos (como restaurantes, tiendas y oficinas) y resultados de “geocódigos”, que indican direcciones, áreas políticas como ciudades y otros puntos de interés.

Solicitudes de búsquedas de sitios cercanos

Una búsqueda de sitios cercanos te permite buscar sitios dentro de un área especificada a través de palabras claves o tipos. En una búsqueda de sitios cercanos siempre debe incluirse una ubicación, que puede especificarse con dos métodos:

  • un objeto LatLngBounds;
  • un área circular definida como la combinación de la propiedad location (que especifica el centro del círculo como un objeto LatLng) y un radio, medido en metros.

Una búsqueda de sitios cercanos se inicia con una llamada al método nearbySearch() de PlacesService. Este método devolverá un arreglo de objetos PlaceResult. Ten en cuenta que el método nearbySearch() reemplaza al método search() a partir de la versión 3.9.

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

Este método toma una solicitud con los siguientes campos:

  • Ya sea:
    • bounds; debe ser un objeto google.maps.LatLngBounds que debe definir el área de búsqueda rectangular; o
    • location y radius; el primero toma un objeto google.maps.LatLng y el último toma un elemento íntegro simple, que representa el radio del círculo en metros. El radio máximo permitido es de 50 000 metros. Ten en cuenta que cuando rankBy se fija en DISTANCE, debes especificar una location, pero no puedes especificar radius ni bounds.
  • keyword (opcional): un término para coincidir con todos los campos disponibles, incluidos, entre otros, nombre, tipo y dirección, como así también revisiones del cliente y otro contenido de terceros.
  • minPriceLevel y maxPriceLevel (opcional): restringe los resultados a solo dichos sitios dentro del rango especificado. Rango de valores válidos entre 0 (más asequible) y 4 (más costoso), inclusive.
  • name (opcional): un término para coincidir con los nombres de los sitios, separados por un carácter de espacio. Los resultados se restringirán a los que contienen el valor “name” aprobado. Ten en cuenta que un sitio puede tener nombres adicionales asociados, más allá de su nombre indicado. La API intentará hacer coincidir el valor name aprobado con todos los de estos nombres. Como resultado, los sitios se pueden devolver en los resultados cuyos nombres indicados no coinciden con el término de búsqueda, pero cuyos nombres asociados sí coinciden.
  • openNow (opcional): valor booleano. Indica que el servicio de Places solo debe devolver los sitios que están en operación en el momento en que se envía la consulta. Los sitios que no especifican los horarios de apertura en la base de datos de Google Places no se devolverán si incluyes este parámetro en tu consulta. Fijar openNow en el valor false no tendrá efecto.
  • rankby (opcional): especifica el orden en el que se mencionan los resultados. Los posibles valores son los siguientes:
    • google.maps.places.RankBy.PROMINENCE (predeterminado). Esta opción clasifica los resultados según su importancia. La clasificación dará prioridad a los sitios destacados dentro del radio establecido en varios sitios cercanos que coinciden, pero son menos destacados. La importancia se puede ver afectada por la clasificación de un sitio en el índice de Google, la popularidad global y otros factores. Cuando se especifica google.maps.places.RankBy.PROMINENCE, es necesario el parámetro radius.
    • google.maps.places.RankBy.DISTANCE. Esta opción clasifica los resultados en orden ascendente por su distancia del parámetro location especificado (obligatorio). Ten en cuenta que no puedes especificar objetos bounds o radius personalizados si especificas RankBy.DISTANCE. Cuando especificas RankBy.DISTANCE, se requieren uno o más de los objetos keyword, name o type.
  • types: restringe los resultados a sitios que coinciden con el tipo especificado. Solo se puede especificar un tipo (si se proporciona más de un tipo, se ignoran todos los tipos que siguen a la primera entrada). Consulta la lista de tipos admitidos.
  • types (obsoleto): matriz que contiene uno o más tipos admitidos. El servicio mostrará el mejor conjunto de resultados para un grupo de tipos determinado.

También debes pasar un método callback a nearbySearch() para administrar el objeto de resultados y una respuesta de google.maps.places.PlacesServiceStatus.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

Ver el ejemplo (place-search.html)

Solicitudes de búsquedas de texto

El servicio de búsquedas de texto de Google Places es un servicio web que devuelve información sobre un conjunto de sitios basados en una cadena; por ejemplo “pizza en Nueva York” o “tiendas de zapatos cerca de Ottawa”. El servicio responde con una lista de sitios que coinciden con la cadena de texto y cualquier restricción de ubicación que se haya enviado. En la respuesta de búsqueda se incluye una lista de sitios. Puedes enviar una solicitud de detalles de sitios para obtener más información acerca de cualquiera de los sitios de la respuesta.

Las búsquedas de texto se inician con una llamada al método textSearch() de PlacesService.

service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

Este método toma una solicitud con los siguientes campos:

  • query (obligatorio): la cadena de texto en la que se realiza la búsqueda; por ejemplo, “restaurant”. El servicio de Google Places devolverá posibles coincidencias en función de esta cadena y ordenará los resultados según la relevancia percibida. Este parámetro se vuelve opcional si el parámetro type también se usa en la solicitud de búsqueda.
  • Opcional:
    • openNow: valor booleano. Indica que el servicio de Places solo debe devolver los sitios que están en operación en el momento en que se envía la consulta. Los sitios que no especifican los horarios de apertura en la base de datos de Google Places no se devolverán si incluyes este parámetro en tu consulta. Fijar openNow en el valor false no tendrá efecto.
    • minPriceLevel y maxPriceLevel: restringe los resultados solo a dichos sitios dentro del nivel de precio especificado. Los valores válidos se encuentran en el rango que varía de 0 (más asequible) a 4 (más costoso), inclusive.
    • Ya sea:
      • bounds: objeto google.maps.LatLngBounds que define el rectángulo en el que debe realizarse la búsqueda; o
      • location y radius: puedes restringir los resultados a un círculo especificado pasando un parámetro location y radius. Esto indicará al servicio de Google Places que muestre preferentemente los resultados dentro de ese círculo. Es posible que aún se muestren resultados externos al área definida. El primero de estos parámetros toma un objeto google.maps.LatLng y el segundo un elemento íntegro simple, que representa el radio del círculo en metros. El radio máximo permitido es de 50 000 metros.
    • types: restringe los resultados a sitios que coinciden con el tipo especificado. Solo se puede especificar un tipo (si se proporciona más de un tipo, se ignoran todos los tipos que siguen a la primera entrada). Consulta la lista de tipos admitidos.
    • types (obsoleto): matriz que contiene uno o más tipos admitidos. El servicio devolverá resultados que coincidan con cualquiera de los tipos especificados.

También debes pasar un método callback a textSearch() para administrar el objeto de resultados y una respuesta de google.maps.places.PlacesServiceStatus.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    query: 'restaurant'
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

Solicitudes de búsquedas por radar

Una búsqueda por radar te permite buscar sitios dentro de un radio de búsqueda especificado por palabra clave, tipo o nombre. La búsqueda por radar devuelve más resultados que la búsqueda de sitios cercanos o de texto, pero los resultados contienen menos campos. Puedes llamar a PlacesService.getDetails() para obtener más información acerca de cualquiera de los sitios de la respuesta.

Los objetos PlaceResult devueltos por radarSearch() tienen únicamente las siguientes propiedades:

  • geometry.location;
  • place_id;
  • reference. (Nota: reference ha quedado en desuso a favor de place_id, conforme al aviso sobre desuso de esta página).

Una búsqueda por radar de sitios se inicia con una llamada al método radarSearch() de PlacesService. Este método devolverá un arreglo de hasta 200 objetos PlaceResult.

service = new google.maps.places.PlacesService(map);
service.radarSearch(request, callback);

Este método toma una solicitud con los siguientes campos:

  • Ya sea:
    • bounds; debe ser un objeto google.maps.LatLngBounds que debe definir el área de búsqueda rectangular; o
    • location y radius; el primero toma un objeto google.maps.LatLng y el último toma un elemento íntegro simple, que representa el radio del círculo en metros. El radio máximo permitido es de 50 000 metros.
  • Al menos una de las siguientes opciones:
    • keyword (opcional): un término para coincidir con todos los campos disponibles, incluidos, entre otros, nombre, tipo y dirección, como así también revisiones del cliente y otro contenido de terceros.
    • name (opcional): un término para coincidir con los nombres de los sitios, separados por un carácter de espacio. Los resultados se restringirán a los que contienen el valor “name” aprobado. Ten en cuenta que un sitio puede tener nombres adicionales asociados, más allá de su nombre indicado. La API intentará hacer coincidir el valor name aprobado con todos los de estos nombres. Como resultado, los sitios se pueden devolver en los resultados cuyos nombres indicados no coinciden con el término de búsqueda, pero cuyos nombres asociados sí coinciden.
    • types: restringe los resultados a sitios que coinciden con el tipo especificado. Solo se puede especificar un tipo (si se proporciona más de un tipo, se ignoran todos los tipos que siguen a la primera entrada). Consulta la lista de tipos admitidos.
    • types (obsoleto): matriz que contiene uno o más tipos admitidos. El servicio mostrará el mejor conjunto de resultados para un grupo de tipos determinado.
  • Opcional:
    • minPriceLevel y maxPriceLevel (opcional): restringe los resultados solo a dichos sitios dentro del nivel de precio especificado. Los valores válidos se encuentran en el rango que varía de 0 (más asequible) a 4 (más costoso), inclusive.
    • openNow: valor booleano. Indica que el servicio de Places solo debe devolver los sitios que están en operación en el momento en que se envía la consulta. Los sitios que no especifican los horarios de apertura en la base de datos de Google Places no se devolverán si incluyes este parámetro en tu consulta. Fijar openNow en el valor false no tendrá efecto.

También debes pasar un método callback a radarSearch() para administrar el objeto PlaceResults y google.maps.places.PlacesServiceStatus.

// 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">

var map;
var infoWindow;
var service;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.867, lng: 151.206},
    zoom: 15,
    styles: [{
      stylers: [{ visibility: 'simplified' }]
    }, {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  // The idle event is a debounced event, so we can query & listen without
  // throwing too many requests at the server.
  map.addListener('idle', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.error(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    addMarker(result);
  }
}

function addMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
      anchor: new google.maps.Point(10, 10),
      scaledSize: new google.maps.Size(10, 17)
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      infoWindow.setContent(result.name);
      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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places,visualization" async defer></script>
// 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">

var map;
var infoWindow;
var service;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.867, lng: 151.206},
    zoom: 15,
    styles: [{
      stylers: [{ visibility: 'simplified' }]
    }, {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  // The idle event is a debounced event, so we can query & listen without
  // throwing too many requests at the server.
  map.addListener('idle', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.error(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    addMarker(result);
  }
}

function addMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
      anchor: new google.maps.Point(10, 10),
      scaledSize: new google.maps.Size(10, 17)
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}

Ver el ejemplo (place-radar-search.html).

Respuestas de búsqueda

Códigos de estado

El objeto de respuesta PlacesServiceStatus contiene el estado de la solicitud y puede tener información de depuración para ayudarte a localizar la razón por la cual falló la solicitud de un sitio. Los posibles valores de estado son los siguientes:

  • ERROR: se produjo un problema al contactar a los servidores de Google.
  • INVALID_REQUEST: esta solicitud no es válida.
  • OK: la respuesta contiene un resultado válido.
  • OVER_QUERY_LIMIT: la página web excedió su cuota de solicitudes.
  • REQUEST_DENIED: la página web no puede usar PlacesService.
  • UNKNOWN_ERROR: no se pudo procesar la solicitud de PlacesService debido a un error en el servidor. La solicitud puede tener éxito si realizas un nuevo intento.
  • ZERO_RESULTS: No se encontraron errores para esta solicitud.

Resultados de búsqueda de sitios

Las funciones nearbySearch() y textSearch() devuelven un arreglo de objetos PlaceResult. La función radarSearch() devuelve un subconjunto de los campos de PlaceResult, según lo descrito antes.

En cada objeto PlaceResult se pueden incluir las siguientes propiedades:

  • formatted_address es una cadena que contiene la dirección del sitio en lenguaje natural. A menudo, esta dirección equivale a la “dirección postal”. La propiedad formatted_address solo se devuelve para una búsqueda de texto.
  • geometry: información del sitio relacionada con aspectos geométricos. Esto incluye lo siguiente:
    • location proporciona la latitud y longitud del sitio.
    • viewport define el viewport preferido en el mapa al visualizar el sitio.
  • html_attributions: arreglo de atribuciones que debes mostrar al exhibir los resultados de búsqueda. Cada entrada del arreglo contiene el texto HTML de una atribución simple. Nota: Esto representa una adición de todas las atribuciones de la respuesta de búsqueda en su totalidad. Todos los objetos PlaceResult de la respuesta, por lo tanto, contienen listas de atribuciones idénticas.
  • icon: URL de un recurso de imagen que puede usarse para representar el tipo del sitio.
  • 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.
  • name: el nombre del sitio.
  • opening_hours puede contener la siguiente información:
    • open_now es un valor booleano que indica si el sitio está abierto en ese momento.
  • 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
  • rating contiene la clasificación del sitio, de 0,0 a 5,0, según las reseñas de usuarios agregadas.
  • 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.
  • types: matriz de tipos para este sitio (p. ej., [“political”, “locality”] o [“restaurant”, “lodging”]).
  • vicinity: dirección simplificada para el sitio, que incluye el nombre de la calle, el número y la localidad, pero no incluye la provincia o el estado, el código postal ni el país. Por ejemplo, la oficina de Google en Sídney, Australia, tiene un valor de vicinity de 5/48 Pirrama Road, Pyrmont.

Acceso a resultados adicionales

De manera predeterminada, cada búsqueda de sitios devuelve hasta 20 resultados por consulta. Sin embargo, cada búsqueda puede devolver hasta 60 resultados divididos en tres páginas. Se encuentran disponibles páginas adicionales a través del objeto PlaceSearchPagination. Para acceder a páginas adicionales, debes capturar el objeto PlaceSearchPagination a través de una función de callback. El objeto PlaceSearchPagination se define de la siguiente manera:

  • hasNextPage una propiedad booleana que indica si hay más resultados disponibles. El valor es true cuando hay una página de resultados adicionales.
  • nextPage() es una función que devolverá el conjunto siguiente de resultados. Después de ejecutar una búsqueda, debes esperar dos segundos hasta que esté disponible la página siguiente.

Para ver el conjunto siguiente de resultados, llama a conjunto siguiente de resultados nextPage. Cada página de resultados debe mostrarse antes de la que le sigue. Ten en cuenta que cada búsqueda cuenta como una solicitud única para tus límites de uso.

En el ejemplo siguiente se demuestra la manera de modificar tu función de callback para capturar el objeto PlaceSearchPagination, de modo que puedas emitir varias solicitudes de búsqueda.

// 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">

var map;

function initMap() {
  var pyrmont = {lat: -33.866, lng: 151.196};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, processResults);
}

function processResults(results, status, pagination) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      moreButton.addEventListener('click', function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      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)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}
<div id="map"></div>
<div id="right-panel">
  <h2>Results</h2>
  <ul id="places"></ul>
  <button id="more">More results</button>
</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;
}
#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -195px;
  height: 330px;
  width: 200px;
  padding: 5px;
  z-index: 5;
  border: 1px solid #999;
  background: #fff;
}
h2 {
  font-size: 22px;
  margin: 0 0 5px 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 271px;
  width: 200px;
  overflow-y: scroll;
}
li {
  background-color: #f1f1f1;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
li:nth-child(odd) {
  background-color: #fcfcfc;
}
#more {
  width: 100%;
  margin: 5px 0 0 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
// 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">

var map;

function initMap() {
  var pyrmont = {lat: -33.866, lng: 151.196};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, processResults);
}

function processResults(results, status, pagination) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      moreButton.addEventListener('click', function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      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)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}

Ver el ejemplo (place-search-pagination.html).

Detalles del sitio

Además de proporcionar una lista de sitios en un área, el servicio de Google Places también puede devolver información detallada sobre un sitio específico. Una vez que se devuelve un sitio en una respuesta de búsqueda de sitios, se puede usar su id. de sitio para solicitar detalles relacionados, como su dirección completa, su número de teléfono, las calificaciones y reseñas de los usuarios, etc. (La referencia de sitio también puede emplearse para recuperar detalles de este, pero el campo ha quedado en desuso a favor del id. de sitio, conforme al aviso sobre desuso de esta página).

Solicitudes de detalles del sitio

Los detalles de sitio se solicitan con una llamada al método getDetails().

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

Este método toma una solicitud que contiene el campo placeId o reference del sitio deseado. reference ha quedado en desuso a favor de placeId, conforme al aviso sobre desuso de esta página. Obtén más información sobre la manera de hacer referencia a un sitio con un Id. de sitio

También toma un método callback, que debe administrar el código de estado aprobado en la respuesta de google.maps.places.PlacesServiceStatus además del objeto google.maps.places.PlaceResult.

var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

Ver el ejemplo (place-details.html)

Respuestas de detalles del sitio

Códigos de estado

El objeto de respuesta PlacesServiceStatus contiene el estado de la solicitud y puede tener información de depuración para ayudarte a localizar la razón por la cual falló la solicitud de detalles de un sitio. Los posibles valores de estado son los siguientes:

  • ERROR: se produjo un problema al contactar a los servidores de Google.
  • INVALID_REQUEST: esta solicitud no es válida.
  • OK: la respuesta contiene un resultado válido.
  • OVER_QUERY_LIMIT: la página web excedió su cuota de solicitudes.
  • NOT_FOUND: no se encontró la ubicación indicada en la base de datos de sitios.
  • REQUEST_DENIED: la página web no puede usar PlacesService.
  • UNKNOWN_ERROR: no se pudo procesar la solicitud de PlacesService debido a un error en el servidor. La solicitud puede tener éxito si realizas un nuevo intento.
  • ZERO_RESULTS: No se encontraron errores para esta solicitud.

Resultados de detalles del sitio

Una llamada al método getDetails() devuelve un objeto PlaceResult con las siguientes propiedades:

  • address_components: el conjunto de componentes de dirección para la ubicación de este lugar. Para obtener información detallada, consulta la sección Tipos de componentes de dirección.
  • formatted_address: dirección completa del sitio.
  • formatted_phone_number: Número de teléfono del sitio, con el formato establecido conforme a la convención regional del número.
  • geometry: información del sitio relacionada con aspectos geométricos. Esto incluye lo siguiente:
    • location proporciona la latitud y longitud del sitio.
    • viewport define el viewport preferido en el mapa al visualizar el sitio.
  • html_attributions: texto de atribución que debe mostrarse para esta ruta.
  • icon: URL de un recurso de imagen que puede usarse para representar el tipo del sitio.
  • 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.
  • international_phone_number contiene el número de teléfono del sitio en formato internacional. El formato internacional incluye el código de país y está precedido por un signo más (+). Por ejemplo, el international_phone_number de la oficina de Google en Sídney, Australia, es +61 2 9374 4000.
  • name: el nombre del sitio.
  • utc_offset contiene la cantidad de minutos de desplazamiento de la zona horaria actual de este sitio respecto de la zona UTC. Por ejemplo, para sitios ubicados en Sídney, Australia, durante el horario de verano esta cifra sería 660 (+11 horas respecto de UTC) y, para sitios ubicados en California fuera del horario de verano, la sería -480 (-8 horas respecto de UTC).
  • opening_hours contiene la siguiente información:
    • open_now es un valor booleano que indica si el sitio está abierto en ese momento.
    • periods[] es un arreglo de períodos abiertos que cubren siete días, a partir del día domingo, en orden cronológico. Cada período contiene:
      • open contiene un par de objetos de día y hora que describen cuándo abre el sitio:
        • day un número del 0 al 6, correspondiente a los días de la semana, a partir del domingo. Por ejemplo, "2" significa "martes".
        • time puede contener una hora del día en formato de 24 horas (los valores se encuentran dentro del rango de 0000 a 2359). El valor time se informará en la zona horaria del sitio.
      • close puede contener un par de objetos de día y hora que describen cuándo cierra el sitio. Nota: Si un lugar está siempre abierto, no se incluirá la sección close en la respuesta. Las aplicaciones pueden depender de la indicación “siempre abierto” como un período open que se representa con day con un valor de 0, time con un valor de 0000, y sin close.
    • weekday_text es un arreglo de siete cadenas que representan las horas de apertura con formato para cada día de la semana. Si se especificó un parámetro language en la solicitud de detalles del sitio, el servicio de Places dará formato a las horas de apertura y las localizará según corresponda para ese idioma. El orden de los elementos en este arreglo depende del parámetro language. En algunos idiomas, la semana inicia el lunes y, en otros, comienza el domingo.
  • permanently_closed: indicador booleano que señala si el sitio se ha cerrado de manera permanente (valor true). Si el sitio no está cerrado de manera permanente, el indicador está ausente en la respuesta.
  • photos[]: arreglo de objetos PlacePhoto. Puedes usar un objeto PlacePhoto para obtener una foto con el método getUrl() o inspeccionar el objeto en busca de los siguientes valores:
    • height: la altura máxima de la imagen, en píxeles.
    • width: el ancho máximo de la imagen, en píxeles.
    • html_attributions: Texto de atribución que debe mostrarse con la foto del sitio.
  • place_id: identificador textual que identifica de manera exclusiva un sitio y se puede usar para recuperar información sobre el sitio a través de una solicitud de detalles de un sitio. Obtén más información sobre la manera de hacer referencia a un sitio con un Id. de sitio
  • rating: clasificación del sitio, de 0,0 a 5,0, según las reseñas de usuarios agregadas.
  • 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.
  • reviews: contiene un arreglo de hasta cinco reseñas. Cada reseña consta de varios componentes:
    • aspects[]: contiene un arreglo de objetos PlaceAspectRating y cada uno proporciona una calificación de un atributo individual del establecimiento. El primer objeto del arreglo se considera como el aspecto principal. Cada PlaceAspectRating se define de la siguiente manera:
      • type: el nombre del aspecto que se está calificando. Los tipos admitidos son los siguientes: appeal, atmosphere, decor, facilities, food, overall, quality y service.
      • rating la calificación del usuario para ese aspecto en particular en una escala de 0 a 3.
    • author_name el nombre del usuario que envió la reseña. Las reseñas anónimas se atribuyen a "un usuario de Google". Si se configura un parámetro de idioma, la frase “Un usuario de Google” devolverá una cadena localizada.
    • author_url la dirección URL del perfil de Google+ del usuario, si estuviera disponible.
    • language un código de idioma IETF que indica el idioma utilizado en la reseña del usuario. Este campo contiene solo la etiqueta del idioma principal y no la etiqueta secundaria, que indica el país o la región. Por ejemplo, todas las reseñas en inglés están etiquetadas como “en”, y no como “en-AU” o “en-UK”, etc.
    • rating la calificación general del usuario para ese sitio. Es un número entero de 1 a 5.
    • text la reseña del usuario. Al revisar una ubicación con Google Places, las reseñas textuales se consideran opcionales. Por lo tanto, este campo puede estar vacío.
  • types: matriz de tipos para este sitio (p. ej., [“political”, “locality”] o [“restaurant”, “lodging”]).
  • url: URL de la página oficial de Google del sitio. Es página de Google que contiene la mejor información disponible acerca del sitio. Las aplicaciones deben establecer un vínculo con esta página o insertarla en cualquiera de las pantallas que muestren al usuario resultados detallados acerca del sitio.
  • vicinity: dirección simplificada para el sitio, que incluye el nombre de la calle, el número y la localidad, pero no incluye la provincia o el estado, el código postal ni el país. Por ejemplo, la oficina de Google en Sídney, Australia, tiene un valor de vicinity de 5/48 Pirrama Road, Pyrmont. La propiedad vicinity solo se devuelve para una búsqueda de sitios cercanos.
  • website indica el sitio web autorizado del sitio, como la página de inicio de una empresa.

Es posible que las calificaciones multidimensionales no estén disponibles para todas las ubicaciones. Si hay muy pocas reseñas, la respuesta de detalles incluirá una calificación heredada en una escala de 0,0 a 5,0 (si estuviera disponible) o no incluirá calificación.

Cómo hacer referencia a un sitio con un id. de sitio

Se puede hacer referencia a sitios en un mapa de Google de forma exclusiva con su ID de sitio. Los id. de sitio están disponibles para la mayoría de las ubicaciones, incluidos negocios, monumentos, parques e intersecciones. Estos id. de sitio son estables. Es decir, una vez que has identificado el id. de un sitio, puedes volver a usar ese valor la próxima vez que busques la ubicación en cuestión.

Para usar el id. de sitio en tu aplicación, primero debes buscar el id., que está disponible en PlaceResult de una búsqueda de sitios o una solicitud de detalles. Luego puedes usar el id. de sitio para buscar Place Details o habilitar Save Attribution en un mapa cuando se inicia sesión.

Los id. de sitio están exentos de las restricciones de almacenamiento en caché establecidas en la Sección 10.5.d de las Condiciones de servicio de las Google Maps API. Por lo tanto, puedes almacenar valores de id. de sitio de manera indefinida.

var map;

function initialize() {
  // Create a map centered in Pyrmont, Sydney (Australia).
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8666, lng: 151.1958},
    zoom: 15
  });

  // Search for Google's office in Australia.
  var request = {
    location: map.getCenter(),
    radius: '500',
    query: 'Google Sydney'
  };

  var service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

// Checks that the PlacesServiceStatus is OK, and adds a marker
// using the place ID and location from the PlacesService.
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: results[0].place_id,
        location: results[0].geometry.location
      }
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Fotos de sitios

La función de fotos de sitios te permite agregar contenido fotográfico de alta calidad a tu sitio. El servicio de fotos te proporciona acceso a las millones de fotos almacenadas en la base de datos de Google Places y Google+ Local. Cuando obtienes información sobre sitios mediante una solicitud de detalles del sitio, se devolverán referencias de fotos para el contenido fotográfico correspondiente. Las solicitudes de búsqueda de sitios cercanos y búsqueda de texto también devolverán la referencia de una foto por sitio, cuando corresponda. A través del servicio de fotos, puedes tener acceso a las fotos de referencia y cambiar el tamaño de la imagen al tamaño óptimo para tu aplicación.

Se devolverá un arreglo de objetos PlacePhoto como parte del objeto PlaceResult de cualquier solicitud de métodos getDetails(), textSearch() o nearbySearch() realizada en función de un elemento PlacesService.

Nota: La cantidad de fotos devueltas varía según la solicitud.

  • Una búsqueda de sitios cercanos o de texto devolverá, como máximo, un objeto PlacePhoto.
  • Las búsquedas por radar no devuelven información sobre fotos.
  • Una solicitud de detalles devuelve hasta diez objetos PlacePhoto.

Puedes solicitar la URL para la imagen asociada llamando al método PlacePhoto.getUrl() y pasando un objeto PhotoOptions válido. El objeto PhotoOptions te permite especificar la altura y el ancho máximos deseados para la imagen. Si especificas un valor para max_height y max_width, el servicio de fotos cambiará el tamaño de la imagen de modo que sea el menor de los dos, y mantendrá la relación de aspecto original.

En el siguiente fragmento de código se acepta un objeto de sitio y se agrega un marcador al mapa si existe una foto. El marcador de imagen predeterminado se reemplaza por una versión pequeña de la foto.

function createPhotoMarker(place) {
  var photos = place.photos;
  if (!photos) {
    return;
  }

  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name,
    icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
  });
}

Enviar comentarios sobre...

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