Custom Google Maps To Display Store Locations

As the Web Producer/Designer at Country Weekly Magazine’s website I am proud to announce a new feature that will make it easier for people to find our magazine in stores. I was able to create this tool thanks to Google’s excellent generosity. You can see this new tool in action here: www.countryweekly.com/where2buy

If you haven’t already created your own custom Google Map, here are some resources that might be helpful. After figuring it out, it’s not too difficult and once in place it’s easy for others to update the locations.

How It Works

There are two components:

1. the code on your site that defines how and where the Google Map is displayed
2. a Google Doc spreadsheet containing a list of locations

In order for these two components to correctly produce a map similar to the one shown above you will need the following:

1. Google Account to create the necessary Google Doc spreadsheet
2. Google Maps API Key

Signing up for a Google Account is simple and you can get a Google Maps API Key at code.google.com/apis/maps/signup.html. There is also an excellent resource for general info about everything Google Map API at code.google.com/apis/maps/documentation/staticmaps/. However, there’s a lot of information there you don’t really need.

How It’s Done

1. Build a spreadsheet with the desired marker locations. It can have columns similar to this, but you can name them however: rank, title, address, city, state, zip, description
2. Geocode every location. Geocoding a location means providing a latitude and longitude, an exact global location, for each marker on the map. You can do this manually by finding the lat/long for a handful of locations with Google Earth. You can also use a free or paid service to automatically geocode your locations based on their street address. Here’s one of those free resources: www.batchgeocode.com. Just paste a tab-delimited version of your location list in, process, and then copy/paste their tab-delimited output back into your file.
3. Copy your geocoded location list into a Google Docs spreadsheet and save.
4. Share the location spreadsheet from Google Docs by having it open and clicking the ‘Share’ button and then ‘Publish’ the document. After the doc has been published Google will give you a URL where anybody can see this content. Toward the end of the URL it will say ‘key=’. Everything that follows that is your spreadsheet’s unique key. Save that key for later.
5. Request a Google Maps API Key for the URL under which your map will appear on your site. Save that key for later.
6. Go to the Create a Map from a Published Google Spreadsheet page. This page explains a lot on its own. It does a good job of bridging all of this technology and makes it apparent how simple it is to make this work. Everything I have helped you set up should fall into place as you follow the instructions on the Create a Map page.
7. Paste the output of the Create a Map page into your webpage. Be sure to replace the example Google Maps API Key with your own. Without it your map will appear but your locations will not.

Once you have it up and running you can tweak the default location and zoom of the map and add some other cool features.

Tweaking: Set Default Location and Zoom

By default the Create a Map page sets the default location so that it contains your defined markers. Sometimes you want to specifically define the default location. In the generated code look for the following cluster:

cm_map = new GMap2(document.getElementById("cm_map"));
cm_map.addControl(new GLargeMapControl());
cm_map.addControl(new GMapTypeControl());
cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);

Update the cm_map.setCenter(); bit to look like this:

/* Set default map position and zoom here. */
cm_map.setCenter(new GLatLng(41.500000,-99.600000), 7);

This makes it easier to find for future changes. To adjust geocode center of your map, adjust the numbers. The three numbers listed there are:

1. Latitude
2. Longitude
3. Zoom

The zoom value seems to correspond to the ‘notches’ on the visual zoom tool that sits at the top-left corner of most Google Map implementations.

Tweaking: Enable Mouse Wheel Zoom Control

One of my favorite features of Google Maps is that you can zoom in and out of the map with your mouse scroll wheel. This isn’t enabled by default from the Create a Map page. It’s easy to add though. In the same cluster of code shown above add the following statement:

cm_map.enableScrollWheelZoom();

Summary

So that’s it in a nutshell. I hope this helps more people take advantage of the wealth of free tools that Google has made available by way of using standard HTML, CSS and JavaScript. It’s very cool stuff!