Practical Ecommerce

Installing Google Maps On Your Site

Implementing Google Maps into your website is an easy way to provide rich, interactive map features that can help your customers find your business.

Of particular interest to brick-and-mortar stores, Google Maps provides an Application Programming Interface (API) that makes it easy for developers to incorporate custom maps into websites they create.

The first step in working with the Google Maps API is to sign up for what is called an API key. Each website that contains Google maps requires its own API key — an effort to reduce spam and abuse of the service. Once you have your API key, you’re ready to go.

Now that you have your API key, you will need coordinates that tell the API where the center of your map should be. The process of converting addresses to geographic coordinates (latitude and longitude) is called geocoding. Google Maps provides access to geocoders that can easily convert the address you want to serve as the center of your map (such as your business) into latitude and longitude coordinates. With that information, you have everything you need to render a map on a web page.

Rendering maps requires that you add a link to the Google Maps API in the head section of your HTML document. This link is where you provide your unique API key for the site with which you are working. From there, you simply specify an empty DIV element on your page where you would like the map to appear. The API automatically displays and scales the map interface to your DIV element.

At the most basic level, you can provide a draggable, illustrated map that centers on a position of your choice. However, there are many advanced features that allow you to customize your map presentation. Controls can be added to pan and zoom the map, as well as to switch between illustrated and satellite views. An animation API gives developers the ability to animate certain actions. Markers and pointers can be added to the map to show precise locations, and they can be supplemented with callouts that provide more information. Not only can the information in the callouts be customized, but the callouts themselves can be customized to contain tabs, display custom images and more. You can even provide an interface for users to obtain directions from their location to your store’s, all with some simple JavaScript.

Developers can explore many other possibilities with the Google Maps API, and I encourage people to refer to the documentation provided by Google. If your business has a physical location that customers need to be able to find, there is really no excuse for them not to easily find that information on your website.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 7 )

  1. Legacy User May 3, 2007 Reply

    I really like the appearance of Google's maps. I think they are the easiest to read. As an in-house web developer, I looked at Google's API recently for the website of Yoder's Building Supply (Goyoders.com) where we are readying a major site overhaul for release.

    However, I chose MapQuest because its API was simpler to use, or at least its documentation and examples were easier to work with. But its API is in beta and does not work with the Opera web browser, so I may be taking a second look at Google after the site release.

    — *Jonathon Hill*

  2. Legacy User May 17, 2007 Reply

    I've made some examples with Google Maps for my company's website. The only problem I have is, that I don't know exactly if the use in our environment is legal. I went trough the Terms of Use on Google.com and didn't really find something like "it is legal to put Google Maps on a company site to show customers where your office is located". Do you guys know if the use is 100% legal and allowed in a business environment?

    — *Lucas*

  3. Legacy User June 20, 2007 Reply

    How or where can I obtain an API key?

    — *Sam*

  4. Legacy User June 26, 2007 Reply

    You should check out what GSI Commerce is doing with Google Maps. GSI powers the sites of Ace Hardware and RadioShack for example. Both sites have highly customized, interactive implementations of store locators using Google Maps. Check out http://www.acehardware.com and http://www.radioshack.com

    — *John*

  5. Legacy User September 20, 2007 Reply

    Zack
    Do you think this would have merit for us as a one location RV park with rental log cabins??

    Thanks much

    — *Dave Norton*

  6. Legacy User November 15, 2007 Reply

    John,

    Any idea who built those store locator sites for GSI?

    — *Jason*

  7. Legacy User February 25, 2008 Reply

    GSI Interactive (GSI Commerce's interactive agency) built them…

    — *John*