In June we announced Local Context beta which enables you to quickly and easily embed the familiar Google Maps experience into your desktop or mobile web app to provide a smoother user experience, help users make quicker decisions, minimize site abandonment, and improve conversions. To improve the Local Context experience for you and your end users, we’ve added new functionality that gives you the ability to load and reload the Local Context layer when it makes sense for your business and users. Here’s how it works, how you can use it to optimize your experiences, and how it can benefit your customers. 

How it works

The Local Context layer includes information like place descriptions, price level, ratings, reviews, photos, and estimated time of arrival and walking directions from the location of interest. We improved Local Context so that you can decide whether to load the Local Context layer together with the Google map, or separately. That means it’s up to you when you load or update the Local Context layer based on your business and customer needs. 

Now let’s look at how you can optimize Local Context layer loading and reloading to improve customer experience.

Loading the Local Context layer upon user intent 

In order to show only the information an end user is interested in, you have the option to just load the Google map until the end user shows interest in seeing local information by clicking a button provided by you such as “show nearby places” or “see local info.” At that point you can load the Local Context layer to reveal more information to help them make a decision.

Sample code:

// Initialize the map without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['park', 'restaurant', 'tourist_attraction'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Refreshing the Local Context layer based on map interaction

In order to give you control of your Local Context layer loads, places aren’t automatically refreshed when your user zooms out to explore a broader area or pans to see a new neighborhood. But in these situations you might want to refresh the Local Context layer to show your user the new local information for that new area. Now you can give your users the option to request a place refresh through your own UI element or enable a place refresh automatically at predetermined map interactions.

Sample  code:

// Refresh the search when the user clicks a button.
refreshButton.addEventListener("click", () => { 
  localContextMapView.search();
}

Offering users choice in the Local Context layer

In other situations, you might want to give your users the option to view a certain set of places. For example, you might want to create a filter that lets your users see only tourist attractions near hotels they’re considering. This type of customization can provide a new level of user control over what's important to them at that moment, and you can achieve it by detecting those moments and reloading the Local Context layer with the proper parameters—in this case, changing place types to only show dining destinations instead of schools and parks.

Local Context is available as a library for the Maps JavaScript API at no cost during the beta period. To get started, take a look at our documentation. 

For more information on Google Maps Platform, visit our website.