Over the past two weeks I've showed how to build a store locator application using ASP.NET and the free Google Maps API and
Google's geocoding service. Part 1 looked at creating the database to record the store locations. This
database contains a table named Stores with columns capturing each store's address and latitude and
longitude coordinates. Part 1 also showed how to use Google's geocoding service to translate a user-entered address
into latitude and longitude coordinates, which could then be used to retrieve and display those stores within (roughly) a 15 mile area. At the end of Part 1, the results
page listed the nearby stores in a grid. In Part 2 we used the Google Maps API to add an interactive map
to the search results page, with each nearby store displayed on the map as a marker.
The map added in Part 2 certainly improves the search results page, but the way the nearby stores are displayed on the map leaves a bit to be desired. For starters,
each nearby store is displayed on the map using the same marker icon, namely a red pushpin. This makes it difficult to match up the nearby stores listed in the grid
with those displayed on the map. Hovering the mouse over a marker on the map displays the store number in a tooltip, but ideally a user could click a marker to see
more detailed information about the store, such as its address, phone number, a photo of the storefront, and so forth.
This third and final installment shows how to enhance the map created in Part 2. Specifically, we'll see how to customize the marker icons displayed in the map to make
it easier to identify which marker corresponds to which nearby store location. We'll also look at adding rich popup windows to each marker, which includes detailed
store information and can be updated further to include pictures and other HTML content. Read on to learn more!
Read More >
