{"id":444269,"date":"2020-06-01T12:40:50","date_gmt":"2020-06-01T16:40:50","guid":{"rendered":"https:\/\/wpdeveloper.net\/?p=444269"},"modified":"2022-08-25T06:37:45","modified_gmt":"2022-08-25T06:37:45","slug":"embed-google-maps-wordpress","status":"publish","type":"post","link":"https:\/\/wpdeveloper.com\/embed-google-maps-wordpress\/","title":{"rendered":"Easy Ways to Embed Google Maps in WordPress Site [No Coding Required]"},"content":{"rendered":"

If your business has a physical location, you\u2019ll have to make sure that your customers can easily locate it. For doing that, you can embed Google Maps<\/a> <\/strong>and it can give your visitors a birds-ey view of your business location. Now let me ensure you that embedding Google Map is not difficult anymore, nor does it require any coding skills. In this blog, we will show you how to embed Google Maps easily on your website and make it interactive for a better user experience<\/a>.<\/p>\n

<\/p>\n

\"Embed<\/a><\/p>\n

When was the last time you used Google Maps? According to a report<\/a><\/strong>, there are more than a billion active users of Google Maps every month. Google Maps currently has 20+ petabytes of aerial and Street View imagery combined. This is equivalent to 266 years of HD video. Starting from finding the direction to an unknown location to finding the shortest route to a location people use Google Maps for a variety of reasons.<\/p>\n

Embed Google Maps in WordPress<\/h2>\n

Apart from serving the general user, Google Maps also lets businesses get listed on the platform.\u00a0 Once you get your business listed on Google Maps, you will become visible and searchable on Google Maps. If you want to embed your business location on your WordPress website you are at the right place. In this blog, you will learn how to embed Google Maps both in Gutenberg Editor and Elementor Editor.<\/p>\n

Embed Google Maps inside Gutenberg Editor<\/h2>\n

With EmbedPress, you can add Google Maps embeds to WordPress, using\u00a0just a\u00a0URL.<\/p>\n

Get Your Google Map URL<\/h3>\n

Install & activate EmbedPress<\/strong> plugin [If you need help, check this step-by-step guide<\/a>).<\/p>\n

Once you are done, go to Google Maps and find the map location that you want to embed, as in the image below. Copy the URL of your desired map location. Remember, you need the long URL in your browser bar.<\/p>\n

\"Embed<\/p>\n

Embed Google Maps & Publish<\/h3>\n

Now go to your WordPress site. Edit a post or page and launch the Gutenberg Editor. Click the + icon in the top-left corner of the editing area. Search for the \u201cGoogle Maps\u201d block in the \u201cEmbedPress\u201d area.<\/p>\n

\"Embed<\/p>\n

Enter the URL for your Google Map. Your URL will automatically be transformed into an embed of your Google map. Hover over the embed, and a pencil icon will appear. This icon will show \u201cEdit URL\u201d if you hover over it. Click the pencil and you will be able to edit your embed.<\/p>\n

\"Embed<\/p>\n

Embed Google Map inside Elementor Editor<\/h2>\n

If you are using Elementor<\/a> <\/strong>Editor, you can also easily embed Google Maps with drag & drop widget for EmbedPress. Elementor comes with its own native Google Maps element.<\/p>\n

\"EmbedPress<\/p>\n

However, if you need advanced customization options you can use the EA Advanced Google Maps<\/a> element that comes with the Essential Addons for Elementor<\/a>.<\/p>\n

Setup Advanced Google Maps Widget for Elementor<\/h3>\n

[Note: If you do not have Essential Addons for Elementor, read this documentation.<\/a>]<\/p>\n

Open your WordPress Dashboard and navigate to WordPress Dashboard > Essential Addons<\/strong>. Inside the \u2018Elements\u2019<\/strong> tab under the Dynamic Content Elements section, you will find the \u2018Advanced Google Map\u2019 option.<\/p>\n

\"Embed<\/p>\n

In order to use EA Advanced Google Maps, you need to insert your Google Map API Key. After you are done connecting your Google Maps with your WordPress Website, make sure to click on \u2018Save Settings\u2019 option.<\/p>\n

If you do not know how to get your Google Maps API Key, check out this documentation to learn how to get map API key<\/a>.<\/strong><\/p>\n

\"Embed<\/p>\n

After you are done connecting your API Key, launch Elementor Editor and find the \u2018<\/b>EA Google Map\u2018\u00a0<\/b>element from the Search option under the\u00a0\u2018<\/b>ELEMENTS\u2018<\/b>\u00a0tab. Simply just Drag & Drop the\u00a0\u2018<\/b>EA Google Map\u2019 into the\u00a0\u2018<\/b>Drag widget here\u2018\u00a0<\/b>or the \u2018+\u2019 section.<\/p>\n

Customize Advanced Google Map<\/h3>\n

Recommended Reading: Add & Style Your Google Maps Using EA For Elementor<\/a><\/strong><\/p>\n

Once the element is active you will find its settings in the Elementor Sidebar. From the General Settings under the Content Tab, you can use the dropdown menu to choose your preferred Google Map type. There are 8 Map types to choose from. By default, it is set to \u2018Basic\u2019. In order to add a location, you can either add your physical location or add the \u2018Coordinates\u2019.<\/p>\n

\"Embed<\/p>\n

Moreover, you can also place multiple markers on your map. For \u2018Multiple Marker\u2019 Google Map type, you need to configure the \u2018Map Marker\u2019 settings first. You can add a location by inserting its Latitude, Longitude, Title & Content.<\/p>\n

\"Embed<\/p>\n

Moreover, using EA Advanced Google Maps you can pick a \u2018Theme Source\u2019 from 3 available options: Google Standard, Snazzy Maps & Custom.<\/p>\n

\"Embed<\/p>\n

Final Words!<\/h2>\n

Now you know how you can embed Google Maps both inside Gutenberg Editor and Elementor Editor. As soon as you embed Google Maps in your website, share your map view on social media to let everyone know, and feel free to tag us in your post to get featured on our social channels.<\/p>\n","protected":false},"excerpt":{"rendered":"

Whether you are using Gutenberg or Elementor Editor, you can embed Google Maps in WordPress Site in under five minutes.<\/p>\n","protected":false},"author":9206,"featured_media":463731,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"categories":[1039,88],"tags":[104,1001,121,238,89],"class_list":["post-444269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-embedpress","category-tutorials","tag-elementor","tag-embed-google-maps","tag-essential-addons","tag-google-maps","tag-wordpress"],"nelio_content":{"autoShareEndMode":"never","automationSources":{"useCustomSentences":false,"customSentences":[]},"efiAlt":"","efiUrl":"","followers":[2045,13301,9206],"highlights":[],"isAutoShareEnabled":false,"networkImageIds":[],"permalinkQueryArgs":[],"series":[],"suggestedReferences":[]},"views":2771,"_links":{"self":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/444269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/users\/9206"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/comments?post=444269"}],"version-history":[{"count":17,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/444269\/revisions"}],"predecessor-version":[{"id":1116544,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/posts\/444269\/revisions\/1116544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/media\/463731"}],"wp:attachment":[{"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/media?parent=444269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/categories?post=444269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdeveloper.com\/wp-json\/wp\/v2\/tags?post=444269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}