Recently, we announced new features in our Places Autocomplete service for Google Maps Platform. One of the new features is that for each prediction returned in the Autocomplete response, the types field will contain more place types (the full list of possible place types is shared in Place Types Table 1 and Table 2 in the documentation).
As a developer, you can make use of this new response information to improve how you display places in Autocomplete by showing a matching icon next to each result. But how do you get the icons for every place type? And what if you want to use those icons in other areas where your app uses the Places API, like in the results of a Place Search?
Let’s take a look at a quick JavaScript example, where I added place type icons to Autocomplete results in Tokyo.
Autocomplete with place type icons
In the scenario above, I set up an Autocomplete session with location bias for Tokyo, Japan and a filter for ‘establishment’ types. In the example on the left, when the user types ‘na’, the list appears without differentiated place type icons. In contrast in the example on the right, when the user types ‘na’ we make use of the place types in the response to display place type icons and differentiate suggestions for the user.
Getting the iconsWhen building the sample above, I ran into a common problem: Where will I get those icons? I’m not going to create custom icons myself, and I’d like to use the same icons Google uses to take advantage of the user recognition of those icons from the Google Maps app. Even better if I could have Google host the icons for me so I don’t have to maintain them myself. Luckily, our friends in Material Design have provided Material Icons. They explain the beauty of these icons best:
“Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.”
Since I built the Autocomplete sample as a web app, I used the icon font using Google Web Fonts. In the <head> of my HTML page, I only needed to add this line:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">The Material Icons Guide also provides instructions for self-hosting the font or image files, getting these icons into your Android app or iOS app, and displaying icons in right-to-left (RTL) language UI. Best of all, the icons are free for everyone to use under the Apache license version 2.0.
Applying the icons to Autocomplete resultsI wrote a function to check whether a selected type was in the prediction’s types property. If it matched one that I wanted to differentiate with a special icon, I populated that icon with the material icon that I thought best matched the type. To find the icon I wanted for each type, I browsed the Material Icons Library and used the name below the icon to reference in my code. By default, I am using the generic place icon for any place type I don’t have a specific icon for.
// Builds a div for each prediction with the appropriate icon
function populate(predictions) {
predictions.forEach(element => {
const predictionItem = document.createElement('div');
const predictionIcon = document.createElement('div');
const typesList = element.types;
let materialIcon;
switch (true) {
case (typesList.includes('airport')):
materialIcon = 'local_airport';
break;
case (typesList.includes('restaurant')):
materialIcon = 'restaurant';
break;
case (typesList.includes('store')):
materialIcon = 'local_mall';
break;
default:
materialIcon = 'place';
}
predictionIcon.innerHTML = `<i class="material-icons">${material_icon}</i>`;
predictionItem.append(predictionIcon);
});
}This only shows enough cases to cover the types in the example above, but you could go wild with switch cases to match every possible place type.
To see everything you can do with the Places API, visit the Places API Overview or see the Places SDKs for JavaScript, Android, and iOS.
