How to Use Google Maps Overlays in Joomla

How to Use Google Maps Overlays in Joomla

Shack Locations is the best way to create a location-based directory in Joomla.

Version 1.5 is available now with a really cool new improvement in the Pro version. You can now highlight areas of a map with graphic overlays. This is possible because we've added an integration with Google's "My Maps" service. 

This image below is an example of how this feature works. You can see red, green, and blue overlays highlighting different areas of the map. All of these were drawn with the tools in "My Maps".

canada map

Creating a map overlay in Shack Locations Pro is a four-step process:

  1. Create a map with Google "My Maps" service
  2. Create a required overlay for your map in "My Maps"
  3. Get your "My Maps" map ID number
  4. Set the ID number of your "My Maps" map in Shack Locations Pro.

Let's take a look at this process in more detail.

Step #1. Create a map with "My Maps" 

In this step, your goal is to create a map in Google's "My Maps" free service.

This map must be a copy of your map in Shack Locations Pro, part of which you would like to overlay for your Joomla site visitors.

  • Log into your Gmail account.
  • Click this link to open the "Google My Maps" page.
  • You will see the "Google My Maps" screen, as shown in the next image.
  • Click "CREATE A NEW MAP":

click create a new map

  • Create your map. Please see the "My Maps Help" documentation at this link in case you need help with creating maps in "My Maps". For my example, I created a map of the "Statue of Liberty" National Park in New York:

map of the stature of liberty national monumentum

Step #2. Create an overlay for your map

In this step, you will draw an overlay of an area on the map you created in the previous step.

  • Click "Draw a line":

click draw a line

  • Use lines to draw an outline around your selected area on the map. Once you finished, you will see that your selected area has been overlayed. For my example, I created an overlay for the "Crown Cafe" takeaway:

use lines to outline the required area

Step #3. Get your "My Maps" map ID number

In this step, you will get your "My Maps" map ID number.

  • Click "Share":

click share

  • You will see the "Quick Sharing" box. Click "Enable link sharing":

click enable link sharing

  • You will see the "Enable link sharing" button turn blue. Click "Copy" to copy the URL of this map and then click "Close":

click copy and then click close

  • Paste the URL of the map you just copied in a text editor of your choice. It should reselmble the following:

Copy the part between the "=" and "&" symbols. In my example, I will copy the following:


This is the ID number of your "My Maps" map that you will need in the next step.

Good job! You are ready to move on to the final step.

Step #4. Set the ID number in Shack Locations Pro

  • In your Joomla administrator panel, click "Components" > "Shack Locations Pro".
  • You will see the "Maps" screen, listing your Shack Locations Pro maps. Open the required map for editing. For my example, I open the "New York" map:

click on the required map to open it for editing

  • This will bring your to the "Map: Edit" screen, as you can see in the next image. Click the "Overlay" tab:

click the overlay tab

  • Select "My Maps ID" for the "Overlay Type" parameter and enter your "My Maps" map ID number in the "My Maps ID" box:

select my maps id for the overlay type and copy the id number

  • Click "Save" or "Save & Close".
  • Visit your map at the frontend of your Joomla site. You will see the map overlay at work:

01 an overlay of the crown cafe in the statue of liberty memorial


Thanks to the team at AZ Group for supporting this new feature.

Give Shack Locations a try today. You can create advanced directories with custom maps, markers, infoboxes and hundreds of locations. You can add details to your locations using custom fields. And, you can give your users the ability to search and filter through the locations.

About the author

Steve is the CEO of Joomlashack. Originally from the UK, he now lives in Sarasota in the USA. Steve has been involved with Joomla since 2006.