How do we embed social proof elements like Google Maps into our webpage?

The short answer is: visit Google Maps to find your business, use the share feature to get the embed code, then insert this code into your webpage using an HTML element in your editor such as Elementor, and finally update your page.

Full Explanation

Embedding a Google Maps element on your webpage is a straightforward way to add social proof by showing your business location directly to visitors. This process involves going to Maps.google.com and searching for your business. Once you find it, you use the share option to access the ’embed a map’ feature. This gives you a snippet of HTML code that you can copy.

After copying the code, you return to your webpage editor, which might be Elementor for WordPress users. By adding a new HTML element inside your page layout, you can paste the code into the HTML input area. Once done, you save or update the page, and your visitors will be able to see the embedded Google Map as a social proof element.

Step-by-Step Breakdown

1. Open a new browser tab and go to Maps.google.com.
2. Search for your business location by typing its name or address.
3. Click on the Share button that appears in the business profile.
4. Select the option labeled ‘Embed a map’ from the sharing options.
5. Copy the HTML iframe code provided in the embed section.
6. Return to your webpage editor, such as Elementor if you’re on WordPress.
7. Click on the plus sign (+) to add a new element to your page layout.
8. Look for an element labeled HTML or Custom HTML and drag it into the desired location on your page.
9. Paste the copied iframe code into the HTML code section displayed on the left side or the editor panel.
10. Once the code is inserted correctly, update or publish your page to make the embedded map visible to site visitors.

Real Examples

When embedding Google Maps on a business website, the map typically shows a pin on the business location, confirming its physical presence to potential customers. This visual social proof supports trust and gives users an easy way to find where the business is located.

Common Mistakes

• Forgetting to copy the embed code and instead copying just the URL does not embed the map.
• Failing to paste the code inside an HTML element results in the code displaying as text rather than rendering the map.
• Not updating or publishing the page after adding the embed code means the map won’t appear live on your site.
• Using the wrong editor element other than HTML can cause the map not to display properly.

FAQs

Can I embed Google Maps without using an HTML element?

Embedding requires pasting the HTML iframe code, so using an HTML or Custom HTML element is necessary.

Is this method specific to Elementor on WordPress?

While described with Elementor, this approach works in any webpage editor that allows inserting custom HTML code.

Do I need to obtain any special permissions from Google to embed the map?

No special permissions are needed; embedding is allowed via Google’s official share feature.

Key Takeaways

• Embedding Google Maps adds social proof by visually showcasing your business location.
• The process starts by using the share and embed map features on Google Maps.
• Pasting the HTML code into an HTML element in your page editor is essential.
• Always update or publish your webpage after embedding to make the map visible.