Building a Map in Drupal Using the Google API

Submitted by Karen on Wed, 2008-06-11 23:42.

I have always liked maps. As a child I would take out the atlas or a paper map and was thrilled to be able to understand the lines and symbols. Online maps are even better, and I have wasted many hours scrolling, plotting and zooming.

Creating a customized map at Google Maps is interesting as well, simply add a street address into the search box and a marker will appear on the map. Add as many markers as you like, add your text to the pop-ups associated with the markers, and if save your work to "My Maps". It is also fairly simple to use the Google API to add the map to your own site using an iframe.

The GMap Module for Drupal not only allows you to add the map through an input filter directly into the content of a node, but also provides some features for group mapping, and I hope to try out some of the advanced features soon. The module is more complicated than calling the API from an iframe. The actual setup was not more complicated than any average module, but for some reason it took me a little longer than usual to get things going. I will now jot down a few notes so I don't have to start over from scratch the first time. Hopefully someone else will find it to be of use as well.

The first thing to be done is to apply this fix. The map really won't be usable without it.

Next upload the module and enable as needed. I was only building a basic map so I only enabled the Gmap and GMap Macro Builder modules. Doing this allows for two new configuration pages. Go to the Gmap settings page first, nothing too tricky here. You won't need to mess with every setting as there are a lot listed there only for use with specific addons.

The one thing that may catch your attention more than anything else on the page is the box where you get to set the center of the map. That's right, you gotta cough up a latitude and longitude here. This was something of a problem to me until I discovered Lifehacker's really nice solution using Google maps. Save that link, you may need it later. Basically, Lifehacker saves our collective butts by providing this little piece of JavaScript that can be used to find the coordinates of whatever is centered in a Google map:

javascript:void(prompt('',gApplication.getMap().getCenter()));

How cool is that?

Next, it's time to go over to Site configuration > input formats and enable at least one content format to accept a Gmap input. I chose the Full HTML option for this. You can choose any or all.

Now it is time to head on over to where it says Build a GMap macro. The text box at the bottom of the page holds the results of the settings you entered at the Gmap settings page. If you click on the map that is shown on this page, the coordinates of where you click will be added to this code.

Maybe you are savvy enough to be able to find and click on the spot you would like to show up on the map. I am not. I found it most useful to go back to maps.google and enter the street address, then copy the coordinates and enter them manually.

As an example, this is the code for a map I generated:


[gmap markers=green::36.19593210228108,-81.78754806518555:ASU Agroecology Research Farm + 36.21643202286343,-81.7862606048584:Watauga River Farms + 36.179280623599055,-81.77961945533752:Maverick Farms + 36.198053331260496,-81.6608726978302:Leola Street Community Garden |zoom=9 |center=36.353845104753745, -81.46087646484375 |width=300px |height=400px |control=Small |type=Map]

Examples are also found linked from original module page on Drupal.org.

( categories: )