Shack Toolbox Documentation

How to Display a Google Map in Pop-up with Shack Toolbox Pro

You can embed a Google Map inside a Shack Toolbox Pro pop-up.

To get the same pop-up with your own Google Map, please follow the instructions below.

  • Open up Shack Toolbox Pro module for editing
  • Under the Module tab, click Google Maps:

Google Map box

  • Still under the Module tab:
    • Latitude for marker: enter your location latitude
    • Longitude for marker: enter your location longitude
    • Marker title: enter your map marker title
    • Marker info: enter your map marker short description

First four settings

  • Continue under the Module tab:
    • Latitude - center of map: enter a latitude number to be the center of your map
    • Longitude - center of map: enter a longitude number to be the center of your map
    • Map width [px]: enter a value for the width of your Google Map
    • Map height [px]: enter a value for the height of your Google Map
    • Default Street View: set to No
    • Travel Mode: set to Driving
    • Latitude for dest. marker: enter a latitude value to mark a destination if required
    • Longitude for dest. marker: enter a longitude value to mark a destination if required
    • Destination marker title: enter a title for the destination marker if you set one
    • Destination marker info: enter a short description for the destination marker if you set one

The next group of settings

  • Continue further under the Module tab:
    • Background color: set to #ffffff
    • Zoom: set to 10
    • Min zoom: set to 0
    • Max zoom: set to 0
    • Disable double click zoom: set to No
    • Draggable: set to Yes
    • Keyboard shortcuts: set to Yes

The next group of settings

  • Continue further under the Module tab:
    • Map type control: set to Yes
    • Map type: set to Roadmap
    • Overview map control: set to No
    • Pan control: set to Yes
    • Rotate control: set to No
    • Scale control: set to No
    • Scrollwheel: set to Yes
    • Street view control: set to Yes
    • Zoom control: set to Yes
    • Address control: set to Yes
    • Links control: set to Yes
    • Google Maps API Key: leave empty

Last group of settings under the Module tab

  • Still under the Module tab:
    • Show Title: set to No
    • Position: set to debug
    • Status: set to Published

Title, Position and Status settings

  • Under the Menu Assignment tab, assign this module to the required menu items
  • Leave the rest of the settings intact
  • Click Save or Save & Close

You will see the toggler tab on the top left corner of your site:

Open toggler box

  • Click Open.

You will now see your Google Map inside the Shack Toolbox Pro pop-up:

Google Map inside the Shack Toolbox popup

Well done! You now know how to embed a Google Map inside your Shack Toolbox pop-up module.