Shack Locations Documentation

How to Add an Overlay to a Map in Shack Locations Pro

Documentation for Joomla 3

Shack Locations Pro allows you to highlight an area of a map with a graphic overlay.

For example, here is an overlay pinpointing the "Crown Cafe" takeaway on the map of the "Statue of Liberty" National Park in New York.

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

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 Google "My Maps" service

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 here 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 here a map duplicating your chosen map in Shack Locations Pro. Please, see "My Maps Help" documentation here 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 a required overlay for your map in "My Maps"

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

Well done! You are ready to move to the final step.

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 resemble the following:
https://www.google.co.uk/maps/d/edit?mid=1k4p_svW_LNIBWY51exrjfa92aKCpXqII&usp=sharing

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

1k4p_svW_LNIBWY51exrjfa92aKCpXqII

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 of your "My Maps" map 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 you 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" option 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 front end 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

Documentation for Joomla 5

Shack Locations Pro allows you to highlight an area of a map with a graphic overlay.

For example, here is an overlay pinpointing the "Crown Cafe" on the map of the "Statue of Liberty" National Park in New York, USA:

the final result

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 Google "My Maps" service

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 here 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 here a map duplicating your chosen map in Shack Locations Pro. Please, see "My Maps Help" documentation here 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, USA:

map of the stature of liberty national monumentum

Step #2. Create a required overlay for your map in "My Maps"

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 that you wish to create an overlay for. Once you finished, you will see that your selected area has been overlayed. For my example, I created an overlay for the "Crown Cafe":

use lines to outline the required area

Well done! You are ready to move to the final step.

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 "Share Map" box. Click inside the URL box, copy the URL and click "Close":

copy the url and close the box

 

  • Paste the URL of the map you just copied in a text editor of your choice. It should resemble the following:
https://www.google.co.uk/maps/d/edit?mid=1yFRPub_Xi0PNYcj10k_H8e8uIQzoC9k&usp=sharing

Copy the part after the "=" symbol. In my example, I will copy the following:

1yFRPub_Xi0PNYcj10k_H8e8uIQzoC9k&usp=sharing

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 of your "My Maps" map in Shack Locations Pro

  • In your Joomla 5 administrator dashboard, click "Components" > "Shack Locations Pro" > "Maps".
  • 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 City" map:

click on the required map to open it for editing

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

click the overlay tab

  • Select the "My Maps ID" option for the "Overlay Type" parameter and paste 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 front end of your Joomla site. You will see the map overlay at work, just as you saw at the beginning of this tutorial.