Folie Theme has many elements you can customize live. One of them is the Google Map. An important contact element for the contacts page. It gives the visual preview of the location of your company.
It is very easy to add a Google map in Folie page’s. Follow the steps below to add it.
1-Add Google map element in the page. Go to your page, and hover with the mouse over a row. You will see a light gray balloon in the left corner. Click on it and a list of elements will show up in a pop-up box.
2-Find the Google Map element in the list of elements and click on it to add.
3-Right after adding the map, in the left side sidebar, the options to configure and customize the map, will open. Start by setting up the necessary data to configure map. There are three data that you must add in order for the map to show up: API Key, Coordinates (Latitude and Longitude). The rest of the options are used to style the map.
Add the API key of map. Generate one here, if you don’t have one.
4-Get the coordinates: Go to Google Maps > Go to your location (address) and right-click it on the map > Select “What’s here?” > A card appears at the bottom of the screen with more info, including the latitude and longitude values. Copy these numbers and paste into the map coordinates field.
5-The map configuration is done! Save changes to see the map show up. You can continue now styling it.
6-In the list of options in your left sidebar, scroll the ruler in “Map Height” to change map’s height. Or check ON, the “Full Height Map” option to stretch Map height to 100%. Scroll ruler in “Map Zoom” option to change the value of the initial zoom. Change the map display style in “Style”. Select from 6 available styles in the drop-down, leave normal for the default style. At last, you can add margin and padding to the map box in the design option box at the end of options.
7-Save all your changes live and see the result 🙂 You’re done!
To watch a live demonstration of this element’s adding and option customizing , watch our video tutorial :
Have a nice day!