Get In Touch
15 Nov 2018

Building Shopping in Birmingham

Josh Pyzer

Developer

Ever searched a store, restaurant or hotel on Google to view information about that location? The store knowledge graph on Google is a wealth of knowledge. From opening times to contact details, reviews, to busy periods, Google is the place to go.

When we were appointed to re-create Shopping in Birmingham, we decided to utilise Google’s information by pulling it directly into the new website.

The Google places API condenses all this store information into the form of a Google place ID. By querying each place ID through the Google places API it allows us to pull all the information seen on Google and use it to build an interactive directory with minimal editing for the website content manager.

 

Utilising the Google places api in different ways

To provide some further context, Shopping in Birmingham is managed by Retail Birmingham – a business improvement district that works for and represents all the shops, restaurants and hotels etc in Birmingham City Centre. The aim of the new website is to help promote these businesses and assist any visitors coming into Birmingham City Centre. The previous site had close to 500 stores in the database/directory. The process of adding/updating these stores was a long, laborious process. Google Places was one of the main motivations to help both the user and the client have a better experience on the new site with better data.

 

An interactive directory

One of our aims for the Shopping in Birmingham website was to build a directory of all the stores within the city centre along with making it more interactive. By making the directory interactive it gives the user a much more immersive experience. By using the Google Place ID that we have stored for each location we could grab the coordinates of each location and place it on a map. Doing this gave a comprehensive visual overview of all the stores in Birmingham rather than them just sitting in a list view.

Filters were also included in the directory to help enhance the user’s experience by filtering by location and category. The map also re-centres every time the filters are used to give a focused view of where the user potentially wants to visit.

 

How did we do this?

By using Custom Post Types within WordPress we allowed the client to add and remove shops as they please and add a Google Place ID for each location. By looping through each place ID we gathered the stored coordinates and converted them all into JSON markup language. We could then use this JSON to place all the locations on to the map. We used JSON as Google Maps will only allow a max of 10 markers to be placed onto a map when being asked to do a live place lookup. This is to avoid Google’s servers being hammered by requests and generally speeds up the whole process.

Shopping Map  

Single store information

As part of the directory each individual location has its own location page to give a further, more in-depth look at each store. We saw this as another opportunity to use the information stored within our Google place ID. Not only does this take away the manual element of updating information for a store but it also allows us to automatically update this information by querying the Place ID.

Once again we stored all the information we needed in custom fields within WordPress. It is possible to look up live data as a user lands on a page but we felt this was too risky and this would incur a charge every time a user lands on that page. We created a cron job that updates all the directory items every 30 days to ensure the store information never gets out of date. By using the cron job is also removes the need for the client to constantly be manually changing store information. This can be vitally important especially with large changes to seasonal store opening times.

All Saints - Shopping in Birmingham  

Google pricing structure

Google have recently changed their pricing structure (AKA increasing their prices) so it’s important to only query the information that is required rather than querying the all information on a location as this will trigger the highest possible charge on each lookup.

The pricing is split into three tiers and has varying levels of data. The basic data is free to use but when contact data is required this will incur a charge and the atmosphere data has a higher charge.

However, if billing is enabled on Google maps they kindly give you an free (but limited) allowance each month. If only the required data is queried and that data is then stored there is no reason why this limit should ever be reached.

Car Park Map

The Google place ID is not just for shops, restaurants, and hotels. Most business now have a listing on Google which means they also have a place ID. We used the place ID once again to create a parking map of Birmingham – showing all the key places to park near to key retail destinations.

Car Park Map - Shopping in Birmingham  

Key Takeaways

 

With the Shopping in Birmingham project, we created a product that allows for a more interactive experience for the user, with up to date information powered by the Google places API. Not only that, we also created a product that dramatically cuts down administration time for the client as well as automatically keeping all its information updated.

 
Josh Pyzer
Developer

Josh works in our technical development team working with clients to plan and engineer technological solutions across a range of digital products and services.

Partner with a Reliable & Experienced Digital Studio

Enter your details & we'll be in touch to discuss your project

Enquiry