Have you ever needed to quickly find location of some specific business or outlet close to you, but after searching through their website, all you found is some obscure list of addresses, and to successfully pick the most convenient & closest outlet you got to be either a geographic genius of the specific area, or simply very lucky?

In this time and age, Internet is the primary source of information and so many business interactions happen online, some companies tend to forget that their customers might need to actually physically find them. And that is a real shame, for not only it makes you lose customers, but also because there is a good and (the best feature of them all) free tool out there for it – called Google Maps.

Since there are obviously a million guides how to implement a simple map on your website, I will skip that part (beginners go here), and move straight to the fun part – listing all the cool goodies that helps you customize the map to your design needs.

According to Google Maps Terms & Conditions, the most limiting clause for customization is that you may not in any way obscure or hide Google logo and copyright information in the corner of the map area. Apart from that, it’s pretty much a fair game.

All this info and links are for Google Maps Javascript API v3, which is not backwards compatible with v2.
Custom markers

Let’s be honest, Google default marker icons are butt ugly. Adding your own is easy as a pie. You can specify the image, hook (which part of image is attached to the precise coordinates), clickable region shape (in case the icon has transparency), even the shadow. Syntax explanation here.
Custom infoWindow

Want to add extra information for the marker, but the default infoWindow does not go well with your page design? You can completely redesign its looks by including a simple JS library (like the one here) and adding your own markup and css.
Overlays

Adding a bit more prominent country borders? Coloring whole areas of interest? Showing paths that aren’t limited to just roads? Sure. You can even add a ground overlay (let’s say, an image of the same piece of map 100 years ago) that can be zoomed and abused just like the “normal” map squares. The only fly in the ointment here is that you either need very precise coordinate list / database, or you may not let users zoom in too much, or they will see all the pointy edges of your custom lines.
More about custom overlays here.

And that’s just the visible (customizable design) part of the story. The API is quite powerful, and (since its the same good old Javascript) allows binding of bunch of map pane events to outside and vice-versa as well. Throw in the free services of geocode, directions etc. and there really is no reason to look further for easy and nice interactive flash-free map for your website.

Our latest project that makes use of Google Maps was Tuš. We implemented automated geocoding (address to coordinates conversion) in our CMS system for almost 400 stores. Front-end received adjusted design for info window popup, and of course, customized markers for each different store chain. Search box was implemented not only to search the list of stores (which, by the way, is linked to the map itself and only shows the stores that are visible currently), but also geographical locations (within the country) themselves, so you can, for example, easier find the closest store to your house.

We are looking forward to new projects that will let us push our knowledge of Google Maps to the limits.