Display your physical store address using the Google Maps element

This article will walk you through steps on how to display a Google Map on your page with GemPages.

About the Google Maps element

Using a Google Maps widget on your site can help consumers locate your business and improve the overall user experience. Most websites will add Google Maps on their contact page to identify their actual locations. By doing so, you will save clients the process of opening maps in another window and pasting over the address. They can simply click on your map pinned address and get directions.

From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Google Maps element on the left sidebar of the editor page, under the Module section. 



When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs. 

Configure the Settings Tab


There’re two options for you to add your location in this section:

  • Address: Input your address/location into the field.


  • Coordinate: Enter the latitude and longitude GPS coordinates into the corresponding box. To get the coordinates of your location, check out this article from Google Maps.



Height: Input the number into the field to determine the height in pixels.

Zoom: Use the slider or enter the number into the box to adjust the map's zoom level. You may reduce the zoom level to focus your map directly on your business location. Otherwise, choose a higher level to show the surrounding area.



This setting lets you choose between the map and satellite views of your map to show on your site.


Advanced Mode

To enable more advanced options, toggle on the Advanced Mode switch and input your API key. Click here to get your API key. 



Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.



Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article


If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our customer support via email or live chat.

Was this helpful?