Customizing the Google Store Locator’s store listing

In 2012, Google released a plugin that expedites the process of creating a store locator using Google Maps. It’s not terribly easy to customize though, and there’s not a ton of documentation or examples. While there is a working example of how to customize the info windows that appear over the map markers, there isn’t a working example of how to customize the store information that is listed in the panel.

The code I ended up with is:

storeLocator.Store.prototype.getInfoWindowContent = function () {
        var details = this.getDetails();
        return ['<div class="store"><div class="image"><img width="60" src="', 
            getFriendlyUrl(details.image), '" alt="', details.title,
            '"/></div><div class="title"><a href="', details.webPage, '">', 
            details.title, '</a></div><div class="address">', details.address, 
            '</div><div class="clear"></div></div>'].join('');
}

Since you’re overriding the default Store method, you can put this code outside the Google Maps load method, but I put it inside and before the code that customizes the info window.

By the way, whenever you find yourself having to customize this plugin, I recommend combing through the unminified, uncompiled source.

About Kelly Carter

I'm a freelance web developer, doing business under the name Rainworks Web Development. I'm a skeptical technophile, voracious reader, softcore gamer, and haphazard tinkerer. I have a long-term partner, a cat, and no time for glass ceilings.

Speak Your Mind

*