A better experience traveling using Local Context Library
Travel is a beautiful experience but sometimes is a little messy, you need to do a lot of things: buy tickets, select a place to stay, get the local currency, etc.
When I travel one of the most complicated things to do is select a place to stay. Why? Because I like to have a good experience, that means a place with supermarkets around (mini bars in hotels sometimes are expensive), parks (I like to walk around and know people), restaurants (I love the food), tourist attractions, etc.
How you see is complicated to me to select a place to stay, this needs a lot of research even using platforms focused in travel. It is complicated to find a nice place, because every person has different interests.
One possible solution is use Google Maps + Places API to make a search around hotels, hostels or whatever place you are planning to stay.
With Places API you can make queries including different kinds of places and limit the area to search. But make this integration can be complicated, What if we can have a map with that features by default (That’s the dream folks)
Let me introduce you to a new feature of Maps Javascript API: The Local Context Library.
This feature lets us create a widget showing to user a map with some points of interest(POI) near a specified location. This widget is divided in 3 views: Place Chooser View, Place Details View and photo
Place Chooser View
The first view, you have a list with point of interests
Place Details View
When you click in some marker (added by local context) or you click in some image of Place Chooser View, this is displayed (include user’s comments)
Photo
If you click a photo in Place Details View, you see this
All this with a minimum boilerplate, you can check the getting started in the documentation.
Getting Started
If you have worked with Google Maps you need to do some tasks to be able to use the Local Context Library:
- Enable Maps JS API and Places API in GCP
- In the url to load maps script add library localContext and version beta
<script src=”https://maps.googleapis.com/maps/api/js?libraries=localContext&v=beta&key=YOUR_API_KEY&callback=initMap” defer></script>- Change the initialization to use 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
This is the constructor to create the view of a map. The minimum parameters you need to see the map are:
- element: DOM element to render widget
- placeTypePreferences: Array of strings with type of places or Array of objects with properties type(string) and weight(number). Supported types
- maxPlaceCount: How many places gonna be in widget
Additionally you can set the option of directionOptions setting a location and get the walking route.
If you need more details you can check the reference
The object created has the map instance shown in the widget.
Technical Details
To work correctly you need to have minimum dimensions in the widget container and be careful with css classes and some styles in cascade.
For the moment the widget can’t reload the context when you change your location, so you need to create the view again (Maybe Google Maps team can works to change this behavior)
The supported types are limited compared to Places API list of supported types
Demo Time
All my demos are in the next repository, and this demo is in the next folder (instructions to setup are in the readme). The demo consists of a map widget with an autocomplete. Note: The marker in the center is not part of the Local Context Library.
When you run the sample this is the first view (my town) and this map is only loading restaurants
We can search a place using the autocomplete and search restaurants in some location for example GooglePlex
This sample has enabled the directionsOptions, If you click for example In-N-Out you will see the route to the restaurant (I love that burgers)
You can play with this and changes the place types in the src/index.js
const placeTypePreferences = [
'restaurant'
];For example:
const placeTypePreferences = [
'restaurant',
'electronics_store',
'supermarket'
];And this is my view now
If you wanna explore how map is created
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;
}
The variable mergeOptions are to override the default values.
The option maxPlaceCount is 0 to don’t load places in the localContextMapView initialization, when we do this we need to set maxPlaceCount after the initialization and execute the search method.
The directionsOptions takes the map center to set the origin.
The Local Context Library helps us to do a lot of things with a few lines of code and focus on bringing value to applications. Actually I’m building a personal tool to explore places when I need to travel or move to another department using this feature.
That’s all for the moment, in future posts I’ll explore about customization and how to combine this with other features in the beta version.
