Click here to Skip to main content
13,138,372 members (49,776 online)
Click here to Skip to main content
Add your own
alternative version


76 bookmarked
Posted 22 Mar 2007

Store Locator: Help customers find you with Google Maps

, 22 Mar 2007
Rate this:
Please Sign up or sign in to vote.
Create a Google Maps Store Locator to help customers find you, using GMapEZ declarative Maps API

Google maps help your customers find you


A month or two ago (about the same time Google launched 'full' Map functionality in Australia) I started reading about the Google Maps API, but was a little discouraged by the Javascript-focus: it's definitely a powerful toolset but I didn't have time to learn it. Then I came across GMapEZ which is a great, 'declarative' mechanism to get Google Maps working quickly and easily. This article shows how you could use Google Maps (and parts of their API) along with GMapEZ to build a 'store locator' on your website - customers can type their location (zipcode, suburb or full street address) and be shown which stores are closest to them.

Building a Store Locator

The following things are required to build a map interface to your store directory:

  1. The addresses of all your stores! In the download they are stored in an XML file, but you probably have a database
  2. Latitude and longitude locations for each store address. You could look them up individually or use the Console Application in the download to 'geocode' your entire list via Web Services
  3. A web page to allow Customers to tell you where they are (suburb, zipcode or even full address), and a way to 'geocode' the Customer's location
  4. An algorithm to work out which
  5. And finally, a map interface to display all that data: the Customer's location, your nearby store locations, and any other information that might be useful (address, telephone number, photos, etc).

Some things to note

  • You need a Google Maps key for this code to work. Once you have signed up, put your key in the Console Application .exe.config file AND your web.config
  • GMapEZ is used to make displaying the map data easier. This is a service provided free by another developer - please consider donating if you use the code
  • If you're in Australia, the geocoder can also use the WhereIs Workshop API to 'geocode' Australian addresses. You may find it more (or less) accurate than the Google API for local data

Code Structure

Visual Studio 2005 Solution

The Common project contains (from top to bottom):

The Geocoder Console Application project contains only Main.cs. It is intended to be customized for your particular store address data and run once (or after store data changes) to 'geocode' (get latitude and longitude) for each location.
The demo code uses an XML (serialized array) file to read/write from, so you'll have to build your own database interface.

The WebApplication contains only the ASPX file that has the search/results code and a web.config which has some settings you'll need to move into "your" web.config.
Although it's not shown here, the WebApplication references the Common project, so MAKE SURE you also put the Common DLL in your website's /bin/ directory (otherwise the ASPX page won't work).

Steps in detail

Each of the steps listed at the beginning of the article are discussed below:

1. Your stores' locations

The starting point for the Store Locator is knowing where all the stores are. In the sample, the address data is in an XML file which is a serialized Outlet[]. It should be relatively easy to get your store addresses in a similar format. The class and XML format are shown below:

2. What is geocoding?

Once you have your addresses, you need to find out their latitude and longitude - you need to 'geocode' the addresses. The Geocoder Console Application does that by looping through the addresses and calling a Google Maps web-service to determine the location.

The basic code loop is shown below; the XML that is saved at the end looks like this (notice the Location element has been added).

// load XML containing serialized Outlet[] objects
Outlet[] oa = Kelvin<Outlet[]>.FromXmlFile(infilename);
Instead of opening an XML file to get the outlet list, you could
 open a database connection here and loop through all your addresses
foreach (Outlet o in oa)
    if (null == o.Location)
        o.Location = Geocoder.LocateGoogle
                (o.StreetAddressString, o.Suburb, o.State, o.ZipCode);
         If you had a database, you could write the latitude/longitude for
         each address back to the database here
 Here we save the data to an XML for use by the ASPX page.
 If you'd been saving each lat/long to a database inside the foreach
 loop, you wouldn't need this
Kelvin<Outlet[]>.ToXmlFile(oa, outfilename);
The application uses the Geocoder.LocateGoogle() method (which is located in the Common project) to call the webservice. The key lines of code are:
string url =
    "{0}&output=xml&key=" + _GoogleMapsKey;
string xmlString = GetUrl(url);
coords = xd.GetElementsByTagName("coordinates")[0]; // assumes at least one
Geoloc? gl = new Geoloc (
      , Convert.ToDouble(coordinateArray[0].ToString()));

When run, the console output looks like this:

Console application running

3. Where is the customer?

Now that we have our data 'geocoded', we need a webpage for the customer to:

  1. enter their location, and
  2. view the results

There is just a single page in the WebApplication - NeedCoffeeNow.aspx - which is a CODE-INLINE page to make it easier to deploy on your website.

The input form itself is very simple:

<form runat="server" action="NeedCoffeeNow.aspx">
    Enter your suburb (or postcode):<br />
    <asp:TextBox Id="SuburbTextBox" runat="server" />
    <asp:ListBox Id="MaxDistanceList" runat="server"

            SelectionMode="single" Rows="1">
        <asp:ListItem Text="2 km" Value="2" />
        <asp:ListItem Text="5 km" Value="5" />
        <asp:ListItem Text="10 km" Value="10" />
        <asp:ListItem Text="20 km" Value="20" />
        <asp:ListItem Text="50 km" Value="50" />
        <asp:ListItem Text="200 km" Value="200" />
    <br />
    <asp:Button Id="FindButton" Text="Find Nearest" runat="server"

        OnClick="FindButton_Click" />
    <asp:Literal Id="DisplayLinks" runat="server" />

When the customer enters some data (either their zipcode, suburb or full street address) the FindButton_Click() method uses the "same" Geocoder.LocateGoogle() method that the Console Application used (which is why it's in the Common.DLL).

// Find the START LOCATION (entered by the user)
Geoloc startLocation = Geocoder.LocateGoogle (
        this.SuburbTextBox.Text + "," +
        ConfigurationManager.AppSettings["Country"])??new Geoloc();

4. Which store is closest?

With both the customer's location and all the store locations available as latitude/longitude pairs, we need an algorithm to determine the distance between the customer and each store so we can find out which ones are the closest. In fact, we will get the distance to every store and "order them" according to the distance from the customer.

Thankfully, CodeProject authors come to the rescue again, with C# implementation of "The Haversine formula". If you know of another algorithm, you can easily plug it into the Common project, but this implementation seems to work fine.

The ASPX page loops through every store and determines the distance from the customer, adding each result to a SortedList which we will later iterate over to output the results.

// Generate the NEAREST OUTLETS list,
// calculating the distance between every Outlet in our XML 'database'
// and the start location; adding to a SortedList by distance
SortedList<Double, Outlet> nearest
    = new System.Collections.Generic.SortedList<double, Outlet>();
foreach (Outlet o in oa)
{   if (o.Location.HasValue)
        Double distance = Distance(startLocation, o.Location.Value);
        nearest.Add(distance, o);

5. Bringing it all together: Google Maps & GMapEZ

Having 'geocoded' our stores and the Customer's location, and calculated the distance between them, all we need to do is display the results!

A good place to start is the GMapEZ Documentation which explains that in order to display a map with markers, all you need is a really simple HTML page, like this:

<html xmlns:v="urn:schemas-microsoft-com:vml">
    <title>My GMapEZ Maps</title>
    <meta name="gmapkey" content="abcdefg" />


    <div class="GMapEZ" style="width: 300px; height: 300px;">
    <!-- points go here -->

and as many markers as you need (where it says points go here), which can be as simple as this format:

<a href=",151.20842"></a>

If you look closely at the output in the ASPX page, it's a little more complex:

<a id="idWynyard"


title="Wynyard">GREEN</a><div><p><b style="color:Green;">
Wynyard</b> (0.1kms)<br />301 George Street<br />Sydney, NSW, 2000</p>
<form action="">
    <span style="color:Gray;font-size:smaller">
Enter your address to find your way here</span><br />
    <input name="saddr" value="Sydney"/>
    <input name="sll" value="-33.867139,151.207114" type="hidden"/>
    <input name="daddr" value="-33.86584,151.207265" type="hidden"/>
    <input type="submit" value="Get directions" />

To quickly explain some of the extra bits:

  • a id attribute is used to activate the marker from a hyperlink elsewhere on the page
  • a title attribute works like ToolTip text when the mouse is over the marker
  • a GREEN element value sets the color of the marker
  • div "following" the a contains the HTML to display inside the 'speech bubble' when the marker is clicked
  • form action="" creates a mini-form inside the 'speech bubble' which has 'hardcoded' inputs for each location and takes the customer to Googles driving directions!

The GMapEZ foundation "requires" strict adherence to XML standards in the page, so "be careful" when playing with the sample code. If the page stops working, it's probably due to a missing close-tag or some other minor XML validation error.


The download is really just a proof-of-concept: most sites will have a database of addresses to display, and possibly logged-in customers so you'll already know their address. Alternatively you may find other uses for either the geocoding application or the GMapEZ mapping interface - have fun!

P.S. You can try the NeedCoffeeNow sample online.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
Australia Australia
-- ooo ---

You may also be interested in...


Comments and Discussions

Questioncannot display the map Pin
Member 87109528-Mar-12 10:17
memberMember 87109528-Mar-12 10:17 
BugVirus Pin
seema200820-Feb-12 10:24
memberseema200820-Feb-12 10:24 
GeneralMy vote of 4 Pin
DigCamara18-Jan-12 11:47
memberDigCamara18-Jan-12 11:47 
Generaladdress database Pin
avinash.dora1-Feb-11 22:14
memberavinash.dora1-Feb-11 22:14 
GeneralMy vote of 4 Pin
teamcodez13-Aug-10 1:31
memberteamcodez13-Aug-10 1:31 
GeneralFormat of indian address to geocode Pin
ruchishivnan18-Jul-10 21:04
memberruchishivnan18-Jul-10 21:04 
GeneralPull data from the xml file other than the datat used to map the location Pin
jkesterson10-Jun-10 3:43
memberjkesterson10-Jun-10 3:43 
GeneralRe: Pull data from the xml file other than the datat used to map the location Pin
dduchene27-Aug-10 8:26
memberdduchene27-Aug-10 8:26 
QuestionHow to add an URL to the info window? Pin
jkesterson9-Jun-10 6:14
memberjkesterson9-Jun-10 6:14 
GeneralMarkers off target Pin
Paul Truman14-May-10 4:38
memberPaul Truman14-May-10 4:38 
GeneralRe: Markers off target Pin
jkesterson9-Jun-10 6:22
memberjkesterson9-Jun-10 6:22 
GeneralMaps error Pin
hindarto18-Nov-09 20:36
memberhindarto18-Nov-09 20:36 
AnswerMust be run on a Microsoft.NET server Pin
craigd23-Nov-09 15:32
membercraigd23-Nov-09 15:32 
GeneralSketched Map Pin
mbaocha6-May-09 6:47
membermbaocha6-May-09 6:47 
AnswerRe: Sketched Map Pin
craigd6-May-09 16:39
membercraigd6-May-09 16:39 
QuestionAny way to display distance in miles rather than km's ? Pin
Damo B5-Feb-09 7:58
memberDamo B5-Feb-09 7:58 
AnswerRe: Any way to display distance in miles rather than km's ? Pin
craigd5-Feb-09 8:49
membercraigd5-Feb-09 8:49 
GeneralRe: Any way to display distance in miles rather than km's ? Pin
Damo B5-Feb-09 11:57
memberDamo B5-Feb-09 11:57 
AnswerRe: Any way to display distance in miles rather than km's ? Pin
jkesterson9-Jun-10 6:13
memberjkesterson9-Jun-10 6:13 
AnswerRe: Any way to display distance in miles rather than km's ? Pin
jkesterson9-Jun-10 6:19
memberjkesterson9-Jun-10 6:19 
GeneralRunning GeoCoder Problems Pin
Damo B5-Feb-09 7:14
memberDamo B5-Feb-09 7:14 
GeneralRe: Running GeoCoder Problems Pin
Damo B7-Feb-09 13:26
memberDamo B7-Feb-09 13:26 
GeneralRe: Running GeoCoder Problems Pin
Damo B16-Feb-09 0:51
memberDamo B16-Feb-09 0:51 
GeneralPlease help Pin
klace065-Dec-08 10:50
memberklace065-Dec-08 10:50 
AnswerRe: Please help Pin
craigd7-Dec-08 11:32
membercraigd7-Dec-08 11:32 
GeneralThanks Craigd Pin
johnkuhn803026-Sep-08 8:56
memberjohnkuhn803026-Sep-08 8:56 
QuestionHow to adapt the code to get the address data from a database SQL or MySQL and more a question? Pin
LuizItatiba21-Aug-08 18:18
memberLuizItatiba21-Aug-08 18:18 
GeneralWebsite not available from outside Pin
Borrierulez7-Mar-08 4:35
memberBorrierulez7-Mar-08 4:35 
GeneralIt's one of these days.... Pin
Spotnick13-Dec-07 9:08
memberSpotnick13-Dec-07 9:08 
GeneralIt's one of these days.... Pin
Spotnick13-Dec-07 9:08
memberSpotnick13-Dec-07 9:08 
GeneralIt's one of these days... Pin
Spotnick13-Dec-07 9:07
memberSpotnick13-Dec-07 9:07 
QuestionCan not determine start location Pin
tehremo21-Sep-07 11:18
membertehremo21-Sep-07 11:18 
AnswerRe: Can not determine start location Pin
craigd21-Sep-07 16:52
membercraigd21-Sep-07 16:52 
GeneralRe: Can not determine start location Pin
tehremo22-Sep-07 4:12
membertehremo22-Sep-07 4:12 
GeneralRe: Can not determine start location Pin
Member 76564362-Mar-11 5:34
memberMember 76564362-Mar-11 5:34 
GeneralApplication doesn't load correctly Pin
Borrierulez12-Sep-07 3:57
memberBorrierulez12-Sep-07 3:57 
GeneralRe: Application doesn't load correctly Pin
Borrierulez26-Sep-07 5:06
memberBorrierulez26-Sep-07 5:06 
GeneralRe: Application doesn't load correctly Pin
Borrierulez8-Oct-07 4:14
memberBorrierulez8-Oct-07 4:14 
GeneralRe: Application doesn't load correctly Pin
GaveGozer6-Dec-07 11:05
memberGaveGozer6-Dec-07 11:05 
GeneralRe: Application doesn't load correctly Pin
GaveGozer6-Dec-07 11:28
memberGaveGozer6-Dec-07 11:28 
GeneralRe: Application doesn't load correctly Pin
Borrierulez11-Dec-07 21:51
memberBorrierulez11-Dec-07 21:51 
AnswerAnswer: set a culture that uses fullstop (.) as the decimal seperator [modified] Pin
craigd12-Dec-07 9:10
membercraigd12-Dec-07 9:10 
GeneralUsing Store locator with Database Pin
SumanDesu9-Aug-07 20:34
memberSumanDesu9-Aug-07 20:34 
GeneralAlternative sample, uses database Pin
craigd18-Nov-07 20:18
membercraigd18-Nov-07 20:18 
Generalsome advice please ... Pin
dearos3-Aug-07 23:18
memberdearos3-Aug-07 23:18 
Generalcoming... Pin
craigd6-Aug-07 2:02
membercraigd6-Aug-07 2:02 
GeneralRe: coming... Pin
dearos7-Aug-07 4:21
memberdearos7-Aug-07 4:21 
Generalerror on opening the project Pin
kaasja13-Jul-07 0:08
memberkaasja13-Jul-07 0:08 
GeneralSorry - it was built with Visual Studio Pin
craigd14-Jul-07 2:17
membercraigd14-Jul-07 2:17 
GeneralRe: Sorry - it was built with Visual Studio Pin
kaasja16-Jul-07 7:10
memberkaasja16-Jul-07 7:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170915.1 | Last Updated 22 Mar 2007
Article Copyright 2007 by craigd
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid