Jeffrey Jones

Compatibility: Radiant 0.7 or later
License: MIT License
Code Repository: Github
Dependencies: GeoRuby gem

I am writing this as an introductory tutorial and to let people see what the extension can do by creating a small example map. Installation instructions can be found in the Github repository.

Let’s look at a simple Google map centred on Piccadilly Circus in London with one marker.

Looks simple enough, one map, one marker with some text and a link inside. Right, how do we make this map?

Creating the map in the admin system

Once we have our extension installed we should see the “Maps” tab available. Clicking on the tab should present us with the following screen (Plus/minus some other extensions).

This is the main screen that will list all the google maps we currently have defined on our site. Since we haven’t got any yet this is a very boring screen. We can create a new map by clicking on the “New Map” button.

So here we have a blank map ready to be set-up. We can set the centre and zoom via the input boxes or using the map itself. Hold the left mouse button to drag the map and right click to centre the map on the cursor’s location, the zoom buttons will zoom in and out. Make a note of the name because we will need that later when we reference our map on a public facing page.

I should note that updating the map will automatically update the boxes displaying the lat/long/zoom but not vice versa. If we want to see an updated map after modifying the input boxes then choose “Save and Continue Editing”.

Here we can see our example map centred on Piccadilly with a decent zoom level. Hit “Create GoogleMap” to save our map and display the following screen:

All good so far? Excellent, now we have our map we need to create some markers. Click on the map name to be taken to the marker admin screen for this map.

Again we have nothing much to display as we have no markers; let’s remedy that situation by clicking “New marker”.

Here we have our new marker ready to be filled in. You will notice that the input boxes already contain values. By default the marker starts in the centre of the map. We can change the position just like we did previously on the map (with the same caveats).

Here is our marker with the position, name and title set. The name of the marker is what is displayed in the admin system. The title is what is displayed on the public facing map when we hover the mouse over the marker.

Now to add some content; We can use any filters currently setup with radiant. Here I have decided to use textile and set a simple header, paragraph with a link. Let’s save it and see what happens.

Groovy, we now have our map and marker. Now we need to actually display it on the site.

Embedding in a page

Header

The first thing we need to do is generate the google javascript files. I recommend that this be done in a layout or header snippet.

<r:google_map:header/>

This will create the Google Javascript file link and a local file link that we need.

Body

Ok, now that is done we need to embed the actual map into a page. Choose the page that we wish to make spiffy and go to the location in the page part we want to add the map to then add the following.:

<div id=“mapDiv” style=“width: 100%; height: 300px;”></div>
<r:google_map:generate name=“Central London” div=“mapDiv” />

First we need to create the div that will hold the map. This is not automaically generated so as to give the most flexibility in setting the div up. In this case I have created a div that is 300px high and is 100% of the width of the parent div. The id is required and (like all IDs) should be unique per page.

Next we create the radius tag to generate the map. Two parameters are required here. The “name” parameter is the name of the map we created, the “div” parameter contains the ID of the div to hold the map.

It is perfectly fine to have multiple maps on one page, just double up the above code with a different div and map.

At the moment I am not actively developing this extension as it does everything I need it to. If you have any other requirements then contact me or leave a comment below and I’ll look into doing it. Feedback would also be very appreciated.

Back to the top