Incubating the Store Locator

This post is describing the realization of a pilot for the Store Locator as defined in steps 1-4 in a previous post. It targets Windows Azure Mobile services and the Google Places API. Furthermore, we will activate some authentication on the mobile services to prevent anonymous access to the mobile service interfaces.

Part 1: Windows Azure

First step is to  get Windows Azure prepared to start serving our mobile web application. Simply follow this tutorial step-by-step to get a mobile service and html app up and running within 20 minutes:

Next step is to add some authentication. We’re using Google authentication in this example. This is optional for correct working of the app, but it ensures that the mobile services we’ve just created is only accessible by authenticated users. And we will probably use it in the future to store and maintain our Store Locations, so better do it right now while we’re at it.

To complete the Windows Azure parts of the puzzle, we need to create a website we’ll use to host our app. To start please create a simple (empty) website using Visual Studio 2013, following:

I choose to create an ‘Empty’ ASP.NET project because we don’t need any fuzz with routing or MVC yet, we’re just trying to get our bare essentials up and running and get  some of our expectations confirmed before we put more flesh on it. And it is also a bit of a learning experience to see how things work in reality, compared to what is written in documentation.

After the web app is deployed to the Windows Azure website, don’t forget to add the Azure Website host name to the list of origins allowed to access the Azure Mobile Services. Test the deployed website, which should behave exactly the same as the local deployed version of the app. Put the source code under version control now, because this is the basis on which we will extend your work.

Part 2: Google Places API

Adding the Google Places API to the HTML app is simply a case of embedding a published example of Google in our HTML and JavaScript source files, and tweaking it a bit. We first are getting the current user location following the following example:

When this work, next up is searching for a list of stores near the current user location and displaying those on a map. Just copy the example code from:

You need to merge it a bit in the same files and pages that came with the previous example we got from Google and Windows Azure in an appropriate way to keep it running. Make small changes and test often (on the locally deployed site) if all still works and changes have the expected outcome.

Next up is calculating the distance from the user location to each of the found stores. For this, use the distance matrix feature provided by the same Google JavaScript library. We could calculate the distances ourselves, but getting a proper route calculated for a preferred way of transport is more realistic … and just because it is there, we can :-). Please follow:

The end-result gives us a comfortable feeling that everything we have conceptualized in previous posts is actually working in reality as expected. You can check it for yourself at:

The screen will look something like this, but of course differs for each user location. Works great on my Samsung Galaxy S4 when loading the page in Chrome.  Please also try it on your mobile device or browser of choice, and let me know if there are any defects.


Note that this version only works correctly if a user location is found. And the code is VERY messy, as we’ve not put any effort yet in making it maintainable. And we’re not able to enter a ZIP code yet. But as you can imagine, all quite resolvable, which we will do short term. Next post, we will focus on the remaining part of the list of steps to perform to pilot our Store Locator app (steps 5 and 6), and if that also works out OK, we will start making our app production ready.

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *