I‘ve been getting nicely revved up recently about using maps on websites – not plain old Google maps that help people plan a route to your door, but maps with multiple markers that help people visualise your business.

What does your business have that can be put on a map?

Clients, offices, properties for sale or for rent, tourist destinations, chateaux for rent, nearest airports, best bathing beaches, bars, weekly markets, schools, universities, cinemas … You get the idea. It’s anything that has longitude and latitude.

Simple but powerful publishing

Once everything is nicely set up with your site’s configuration, with all the relevant Drupal modules in place, here’s one possible scenario for getting another of your business assets on the map:

  • log in to your site
  • click the provided Add Content link and select, in this case, the Client project content type
  • fill in all the relevant fields and select the image that you’ve prepared for this project
  • drag the Google map marker to the correct location on the map
  • save the page and log out
  • view the page publicly and note that a link to it has been correctly added to the project menu
  • view your list of client projects and notice that your latest one has just been added at the top of the list, all correctly formatted
  • navigate to your map of client projects and notice that there’s a new marker on the map for this new project
  • hover over the marker and note the project’s title pops up as a tooltip
  • click the marker and see how the resulting popup displays a sub-set of the project’s data, together with a super-small version of the image you selected above
  • navigate to the project’s own page by clicking the title link inside the popup
  • note that a reference to the project page you just created has been added to the site’s XML sitemap and has been queued for submission to Google and Bing when the site’s next cron process runs
  • marvel at it all!
A leaflet-esri-map-screenshot.
The screenshot above is from the English Brass Rubbings website.
A Google map of flight locations from the Balloons over France website.
The screenshot above is from the Balloons over France website.
An exposed filter Leaflet map on the Pennymoor website.
The screenshot above is from the Pennymoor Camping website. Note the exposed filter allowing users to select what the map displays - and how each type of location is represented by a different map icon.

Mapping options

Each of the different elements of these maps can be customised, including the icon used for the markers, the design of the popup, which content fields the popup displays and which pages of the site any of these fields can link to.

In addition, there are the maps themselves and all their attributes (size and zoom included). At the time of writing, any of 26 different mapping systems (Google included) with all their different advantages can be used. See the Leaflet JavaScript library website for more information. It all works beautifully in Drupal, which offers yet more ways of getting your business on the map!

These mapping options don’t not yet exist with the same ease in my chosen replacement for Drupal, Backdrop CMS, but that will no doubt come about.

First posted on April 26, 2014