Google Map Block

Description

The Google Map Block allows you to easily display an embedded Google Map. This is typically used on a Contact, Location, or Where to Buy page, to show visitors the locations of your business(es) while boosting your local SEO.

Screenshots

Settings

Google Map Block Settings (Global)

You can manage the API key and create locations in one handy place, so that locations are easily added to a page. Navigate to Foundry > Settings in the lefthand menu. There, you will find:

  • A Google Maps API key field and a toggle to enable Google Maps
  • “Add Location” button to create custom locations, which you can select for the page that displays your map
  • Within the Location, you’ll need to configure the name of the location (usually a building name or city name), latitude, longitude, and thumbnail image or icon (what pins it on the map); a unique location ID is automatically generated by the block
  • You will also find the Info Window, which contains fields that customize what appears when a person clicks the image or icon to open a pop-out window; there are fields in the Info Window for title (usually the building name or city), content (custom HTML that populates a WYSIWYG box), link text, link URL, link text style, and an ‘open in new tab’ toggle

Make sure to save your changes via the ‘Save Changes’ button when you’re done!

Google Map Block Settings (On-Page)

Locations

Choose which business locations are to appear on the map.

Zoom Level

Toggle the slider to control how zoomed in or out you wish the map to be by default.

Map Type

Choose from Roadmap, Satellite or Terrain mapping.

Map Height & Width (Two Boxes)

Adjust the display sizing of your map.

Map Style

Use https://mapstyle.withgoogle.com/ and select “legacy JSON wizard.”

Disable Default UI

Toggle on or off to remove or show default Google Maps controls such as their zoom buttons.

Advanced

Advanced

Additional CSS Class(es)

This allows you to enter a unique Class identifier, for custom CSS targeting within the theme to faciliate custom development. More about Theme Customizations.

It also enables the use of Foundry utility classes. More about Utility Classes.