How to Insert Google Maps in ClickFunnels

Even if you are using the top marketing platforms, it will be of no use if your website is not engaging enough. You still have to insert numerous features that can increase its appeal to readers. There are numerous options to choose from, but for today’s topic, we are going to focus on a location-based feature.

Specifically, in this article, we are going to provide you with a step-by-step tutorial on how you can insert Google Maps in ClickFunnels. This will be useful in promoting the physical store of your business or if you are performing promotional campaigns in general.

Step 1: Head to ClickFunnels Editor.

The first thing that you have to do is to choose the specific page, a site page or a landing page, that you want to add the Google Maps feature with. If you do not have one yet, you can go on to create a new one for your content. You cannot proceed with the process without this because this will serve as the main subject of this tutorial.

Note that there are no limitations as to what type of content you can create or what page you embed the feature with as long as you believe that it will be helpful to your audience. Some recommendations for the placement, however, include the Contact Us Page, About Us Page, and FAQs.

Step 2: Add Custom HTML.

Once you have figure out where to place Google Maps, what you have to do is to hover over it, and click the orange plus icon that will appear at the bottom of the section. Doing this will trigger a menu containing all the elements that you can add to the page.

The element that you have to integrate is the “Custom HTML”. This is placed at the very bottom of the menu. After successfully doing that, leave it as is. We will get back to it later on in the process.

Step 3: Open Google Maps.

For the next step to add Google Maps in ClickFunnels, you will need to access Google Maps. You can do this by installing and/or opening the application. This is downloadable on both Google Play Store and the App Store. Once opened, type in your desired location.

If for any reason, you cannot use the application or if it is not functioning, you can head on to Google and search “Google Maps”, or the location that you want to add.

The former will lead you to the website version of Google Maps, and the latter will show suggestions related to the location you specified. Also, the second choice will further require you to navigate to the Maps tab of Google’s search engine to complete the step.

Step 4: Embed the desired location.

From the results of the previous step, look for the specific location that you want to add to the page. Take note of the address and its sub details and make sure that it will point your readers to the right one.

If you have already found the address, click on it. This will give you access to a menu. Select “Embed map” from the top tabs to get a hold of the embedded link version of the location.

Make sure that the drop-down menu on its left is set to Website to ensure accuracy. Copy this, and save it for the succeeding step.

Step 5: Paste responsive embed link to element’s code editor.

Now that you are equipped with your desired location’s embedded link, go back to the Custom HTML element that you added on Step 2. Click on it, and then head over to select “Open Code Editor” from the pop-up menu.

The previous button will open a tool that you can use to enter HTML commands. It is important to keep in mind to not paste the embedded link directly as-is. Doing this will still result in Google Maps, but it will not be responsive.

This means that it will not be compatible with various devices, and will not follow window resizing commands.

Taking this into account, below are the sets of codes that you have to enter first. Remember to not remove any characters to prevent any issues.

Take note of the iframe command in a bold italic format. You will need to delete it and replace it with the embed link that you previously gathered for your map. You can also adjust its width and height, which are both entirely up to your preference and your site’s needs. Take into consideration factors like your content, main goal, and the site’s display in size adjustment.

The code and size will play an integral part in the execution of our goal. Loss or excess of even one character will already lead to technical problems, and consequently failure. Double-checking can also be done for a better guarantee.

As soon as you are sure of the correctness of the HTML codes, you can now close the window and proceed to our next, and last, step.

Step 6:  Preview and save changes.

Our last step will be the indicator as to whether you did all of the preceding steps correctly or if you need to look back on the process.

To start, click “Save Changes” to save your current progress. Doing this will also save you from issues like having to redo the previous steps all over again due to data loss. After this, click the Preview button. This will allow you to experience the page as a reader.

The first thing that you will notice is the display. If you did the steps right, you will be able to see Google Maps centering on your chosen location. To check its responsiveness, on the other hand, resize the window, both smaller and larger, and see if the feature works alongside it.

Summary: How to Insert Google Maps in ClickFunnels

As you can see, ClickFunnels is easy to use, right? Inserting Google Maps in your landing pages is a good way to guide your audience better. What makes this feature even better is if you follow all the steps provided above, you will also get a hold of a responsive functionality that is compatible no matter what device is used to access the site.

Doing this may seem like a hassle but it will be no match for the possible improvements in your site’s metrics. This may even be an efficient way to set your brand apart from the other results that will come up on search engines results pages.