FW Gallery Manual
Photo & video gallery with tags, ratings and front-end management.
Demo Website Product Page

Map

FW Gallery map module configuration and settings

FW Gallery map module makes it easy to show your images on a big map. In this tutorial, we will learn how to add Google Maps to your website.

We will proceed as follows:

How to integrate your gallery website with Google maps

To integrate your gallery with Google maps, follow the steps below:

  1. Get an Api Key and copy it. To get Google Maps Api Key, review google maps documentation - https://developers.google.com/maps/documentation/geocoding/get-api-key.

  2. Log in to your user account using your credentials.

  3. Repeat steps 2-3 of How to configure a slideshow tutorial.

  4. Locate FW Gallery Map Module in the list of all available modules and click on it.

  1. Locate Module tab.

  2. Locate Google Map key textbox and paste the key you have received.

  3. Locate Map height textbox and enter 400. Thus, the size of the map is set.

  4. Locate Position dropdown and select position-2 from the list . Thus, you set a position where you would like to place the map.

  5. Locate Status dropdown and choose Published from the list. Your screen should look similar to the screenshot below:

  1. Locate Menu Assignment tab.

  2. Locate Module Assignment dropdown and select On all pages.

  3. Click Save button.

How to set geolocation for images

To learn how to set geolocation for images within your gallery, do the following:

  1. Locate Files tab. To learn how to locate Files tab, review Images tutorial.

  2. Locate landscapes_02 image in the list and click on it.

  1. Locate Geo Tag section at the bottom of the screen.

  2. Enter image coordinates.

  3. Click Save button. Your screen should look similar to the screenshot below:

Once the settings are saved, the image thumbnail appears on the map.

Ask a Question

Was this article helpful for you?