Una mejor experiencia viajando usando Local Context Library

5 min readSep 16, 2020

Viajar es una hermosa experiencia pero algunas veces es un poco complicado, necesitas hacer muchas cosas: comprar boletos, un lugar donde quedarte, obtener la moneda local, etc.

Cuando viajo una de las cosas más complicadas por hacer es seleccionar un lugar para quedarme. ¿Por qué? Debido a que me gusta tener buenas experiencias, esto significa un lugar con supermercados alrededor (los mini bares en los hoteles algunas veces son costosos), parques (me gusta caminar y quizás conocer gente), restaurantes (porque amo la comida), atracciones para turistas, etc.

Como ves es complicado para mí seleccionar un lugar para quedarme, esto necesita mucha investigación inclusive usando plataformas orientadas a viajar. Es complicado encontrar un buen lugar, porque cada persona tiene distintos intereses

Una posible solución es usar Google Maps + Places API para hacer una búsqueda alrededor de hoteles, hostales o cualquier lugar donde decidas quedarte.

Con la API de places puedes crear consultas con diferentes tipos de lugares y limitar el área de búsqueda. Hacer esta integración es complicado pero que tal si tuviéramos un mapa con esas características por defecto (ese es el sueño).

Déjenme presentarles a la nueva feature de la API de mapas en JS: Local Context Library.

Esta feature nos permite crear un widget con un mapa para mostrar al usuario puntos de interés cerca de una ubicación especificada. Este widget nos muestra 3 vistas: Place Chooser View, Place Details View and photo

Place Chooser View

La primera vista donde tienes una lista de puntos de interés

Place Details View

Cuando haces clic en algún marcador (agregado por local context) o haces click en una imagen del Place Chooser view, esta vista se muestra (incluye comentarios de usuario)

Photo

Si haces clic en una foto de la vista Place Details View, verás esto

Todo esto con un código bastante reducido, puedes checar el getting started de la documentación

Comenzando

Si has trabajado con Google Maps, necesitas agregar y modificar código para poder usar la Local Context Library:

Habilita la API de Maps JS y Places API en la Google Cloud Platform
En la url para cargar maps agregar la biblioteca localContext y la version beta

<script src=”https://maps.googleapis.com/maps/api/js?libraries=localContext&v=beta&key=YOUR_API_KEY&callback=initMap” defer></script>

Cambiar la inicialización para usar LocalContextMapView

function initMap() {
 const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.querySelector(‘#map’),
  placeTypePreferences: [‘restaurant’],
  maxPlaceCount: 12
});
  localContextMapView.map.setOptions({
   center: {lat: 47.6532809, lng: -122.3512206},
   zoom: 8
  });
}

LocalContextMapView

Este es el constructor para crear la vista del mapa. Los parámetros mínimos que necesitas para verlo son:

element: elemento del DOM donde pondrá el widget
placeTypePreferences: Arreglo de cadenas con los tipos de lugares o un arreglo de objetos con las propiedades type(string) y weight(number). Supported types
maxPlaceCount: Cantidad de lugares a mostrar en el widget

Adicionalmente puedes definir la opción directionOptions para agregar una ubicación y obtener la ruta para llegar caminando.

Si necesitas más detalles puedes checar la referencia.

El objeto creado tiene la instancia del mapa mostrado en el widget.

Detalles técnicos

Para trabajar correctamente necesitas tener dimensiones mínimas en el contenedor del widget y ser cuidadoso con css clases y algunos estilos de la cascada.

Por el momento el widget no recarga el contexto cuando cambias la ubicación así que necesitas crear la vista de nuevo (quizás el equipo de Google Maps pueda trabajar para cambiar este comportamiento).

Los tipos soportados son limitados comparados con la lista de tipos soportados por Places API

Demo Time

Todas mis demos están en este repositorio y este demo esta en esta carpeta (las instrucciones de setup están en el readme). El demo consiste en el widget del mapa con un auto-completado. Nota: El marcador en el centro no es parte de la Local Context Library.

Cuando corres el ejemplo esta es la primera vista (mi pueblo) y este mapa está cargando solamente restaurantes.

Podemos buscar un lugar usando el auto-completado y buscar algunos restaurantes en alguna ubicación, por ejemplo el GooglePlex

Mapa ubicado en el GooglePlex mostrando Place Chooser view con restaurantes

Este ejemplo tiene habilitado directionsOptions, si haces clic por ejemplo en In-N-Out you verás la ruta al restaurante (amo esas hamburguesas)

Mapa ubicado en GooglePlex mostrando Place Details view en-N-Out y la ruta para llegar

Puedes jugar con esto y cambiar el tipo de lugares en el src/index.js

const placeTypePreferences = [
  'restaurant'
];

Por ejemplo:

const placeTypePreferences = [
  'restaurant',
  'electronics_store',
  'supermarket'
];

Y esta es mi vista ahora

Mapa ubicado en GooglePlex mostrando Place Chooser view con restaurantes, super mercados y tiendas de electrónicos

Si tu quieres explorar cómo el mapa es creado

function createLocalContextMapView(localContextMapViewOptions = {}, mapOptions = {}) {
  const defaultLocalContextMapViewOptions = {
    element: getMapElement(),
    placeTypePreferences,
    maxPlaceCount: 0
  };

  const mergedLocalContextMapViewOptions = {
    …defaultLocalContextMapViewOptions,
    …localContextMapViewOptions
  };  const localContextMapView = new google.maps.localContext.LocalContextMapView(mergedLocalContextMapViewOptions);  const defaultMapOptions = {
    center: { lat: 18.1553086, lng: -95.1845618 },
    zoom: 16,
    styles: mapStyles
  };  const mergeMapOptions = {
    …defaultMapOptions,
    …mapOptions
  };  localContextMapView.map.setOptions(mergeMapOptions);
  localContextMapView.maxPlaceCount = 12;
  localContextMapView.directionsOptions = {
    origin: mergeMapOptions.center
  };
  localContextMapView.search();
  return localContextMapView;
}

La variable mergeOptions son para sobre-escribir los valores por default.

La opción maxPlaceCount es 0 para no cargar lugares en la vista de localContextMapView al momento de inicializarla, cuando hacemos esto necesitamos agregar este valor después y ejecutar el método search.

La opción directionsOptions toma el centro del mapa para agregar el origen.

La Local Context Library nos ayuda a hacer muchas cosas con unas pocas líneas de código y nos enfoca en agregar valor a las aplicaciones. Actualmente estoy construyendo una herramienta personal para explorar lugares cuando necesite viajar o mudarme usando esta biblioteca.

Esto es todo por el momento, en futuros posts exploraré acerca de personalizar y cómo combinar esto con otras features que están en beta.