Introducing the Store Locator Library for Google Maps API

Introducing the Store Locator Library for Google Maps API


CHRIS BROADFOOT: Hi everyone. My name’s Chris Broadfoot. Welcome to another Google
Maps Developer Relations Screencast. Today I’ll be
showing you how to easily create an interactive
store locator using the Google Maps API. You might have already read this
great article on the maps API developer documentation, but
the piece that’s missing is a really great
user interface. Introducing the Open Source
Store Locator Library for the Maps API. This Utility Library makes it
simple for developers such as yourselves to build a great
store locator application. You get many things for free,
including a list of nearby stores, an info window that
shows details about the selected store, HTML5
GeoLocation, which will determine a good initial
viewport for the user, along with Street View, autocomplete
search like on maps.google.com, and
importantly, driving directions. It’s also very extensible. You can customize your markers,
info windows, map style, and anything else
you can think of. One important note, the
library’s very flexible about where the store data
comes from. The examples I’m going to show
you today have data coming from a CSV file, but there’s
an example in the documentation that shows
stores that come from a database hosted on Google
App Engine. I’m going to begin by showing
you the example that’s powered by a CSV file. The location data has been
obtained through data.gov.au, and it’s a list of all the
Medicare offices in Australia. The first thing you’ll notice
is on the left, a list of stores ordered by the distance
from the center of the map. I might want to change the
center to be where I currently am so I see the store
closest to me. So I’m actually at the Google
Sydney office, so I’m going to go ahead and select that. You’ll see that the
map updates to show my current location. And I see a list of the stores
that are closest to the Google Sydney office. Now, I don’t really want to
venture into the city, so I’m going to see the next closest
store that’s not Sydney. But I live close to Lockhart, so
maybe I’ll choose that one. I can go and hit Street
View to get an idea of where the store is. That looks fine, I can get
plenty of parking there. I’m going to go ahead and zoom
in so I can get more of an idea of where it is. And then maybe get some
driving directions. You’ll see that the map handily
uses my current location as the beginning
point, the Google Sydney office, for the directions. And I get the regular directions
panel that you might be familiar with from
using the Google Maps API. Let’s look at one
final example. This one shows how you can
simply customize the map to your liking. Here we’ve customized the icons,
so we’ve branded the map using the Medicare logo. And you can see as we click
we’ve customized the info window using a library
called InfoBubble. This is really great
to be able to brand the map to your liking. Of course, you can style the
panel using CSS, and the map using the Styled Maps API. So, you’d like one of these
store locators? Download the library from the
website, use several examples and demos including the two that
I showed you today, and refer to the detailed
documentation. All you have to do is
click here to start. Thanks for listening.

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author

Leave a Reply

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