A better experience traveling using Local Context Library

Place Chooser View

Place Chooser View

Place Details View

Place Details view

Photo

Photo view

Getting Started

  • 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

  • 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

Technical Details

Demo Time

My town
Map located in GooglePlex showing Place Chooser view restaurants
Map located in GooglePlex showing Place Details view In-N-Out and route to get there
const placeTypePreferences = [
'restaurant'
];
const placeTypePreferences = [
'restaurant',
'electronics_store',
'supermarket'
];
Map located in GooglePlex showing Place Chooser view restaurants, supermarkets and electronic stores
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;
}

--

--

--

Application Developer at IBM, Google Developer Expert in Web Technologies And Google Maps Platform, A Reverse Developer & Fullsnack JS Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Lambda function in node.js to trigger Step Function state machine.

How To Easily Create Programming Cheat Sheets Using GitHub

10 Important Interview Question in JavaScript

I am getting cheaper pricing for hosting from other providers. Why is your price high?

An Introduction to Service Workers in JavaScript

Clone of Groww

Recording JavaScript Animations with timecut

Modifying Object in Nunjucks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joel H. Gomez Paredes

Joel H. Gomez Paredes

Application Developer at IBM, Google Developer Expert in Web Technologies And Google Maps Platform, A Reverse Developer & Fullsnack JS Developer

More from Medium

Object Oriented Design Concepts and Principles

How to Resolve VisualVM UndeclaredThrowableException

Containerisation and Docker in HPC

Introduction to HashMap in Java