{"id":8323,"date":"2023-01-29T09:41:05","date_gmt":"2023-01-29T09:41:05","guid":{"rendered":"https:\/\/essential-blocks.com\/?post_type=docs&#038;p=8323"},"modified":"2023-02-09T08:13:32","modified_gmt":"2023-02-09T08:13:32","password":"","slug":"eb-google-maps","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/eb-google-maps\/","title":{"rendered":"EB Google Maps"},"content":{"rendered":"\n<p><strong>EB Google Maps<\/strong> block can help you to seamlessly display any locations from Google Maps in Gutenberg. Using this Gutenberg block, you can pin any location and showcase it on your website with absolute ease.<\/p>\n\n\n\n<p>Follow this step-by-step guide to display Google Maps using the <strong>EB Google Maps block <\/strong>in Gutenberg.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How To Add Google Maps In WordPress With Essential Blocks?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xerC2h42PJs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Activate EB Google Maps?<\/strong><\/h2>\n\n\n\n<p>Make sure you have <a href=\"https:\/\/essential-blocks.com\/docs\/how-to-install-essential-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>installed and activated Essential Blocks<\/strong><\/a> for Gutenberg on your WordPress site. Essential Blocks comes with a modular control that can give you the freedom to enable or disable any block you want.&nbsp;<\/p>\n\n\n\n<p>To activate the <strong>EB Google Maps <\/strong>block, navigate to <strong>Essential Blocks<\/strong> \u2192 \u2018<strong>Blocks<\/strong>\u2019. Then, toggle to enable the block as shown below. After that, click on the <strong>\u2018Save\u2019 <\/strong>button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-11.gif\" alt=\"EB Google Maps\" class=\"wp-image-8763\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Retrieve Google Maps API Key?<\/strong><\/h2>\n\n\n\n<p>To display Google Maps on your website you need to retrieve API Key first. Learn how to retrieve your Google Maps API key from this <strong><a href=\"https:\/\/essential-blocks.com\/docs\/retrieve-google-maps-api\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/essential-blocks.com\/docs\/retrieve-google-maps-api\/\" rel=\"noreferrer noopener\">documentation<\/a><\/strong>.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Configure EB Google Maps In Gutenberg?<\/strong><\/h2>\n\n\n\n<p>First, navigate to WordPress dashboard <strong>Page \u2192 \u2018Add New\u2019<\/strong> and create a new one or select the page if you already have a created one where you want to add EB Google Maps.<\/p>\n\n\n\n<p>Now, open the page where you want to insert your EB Google Maps. Then hit on the \u2018<strong>+<\/strong>\u2019 button and find the \u2018<strong>EB Google Maps<\/strong>\u2019 block. Click on the block to insert it into your web page.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12.gif\" alt=\"EB Google Maps\" class=\"wp-image-8764\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Alternatively, you can click on the \u2018<strong>+<\/strong>\u2019 icon, search \u2018<strong>EB Google Maps<\/strong>\u2019 at the search bar and you will find the block there. Simply drag and drop the block as shown.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-13.gif\" alt=\"EB Google Maps\" class=\"wp-image-8766\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>General<\/strong><\/h3>\n\n\n\n<p>Navigate to the \u2018<strong>Block\u2019\u2192 \u2018General\u2019\u2192 \u2018Google Maps\u2019<\/strong> option. From the \u2018<strong>Address<\/strong>\u2019 option, you can display any location by simply searching your address or by latitude and longitude. Find the location you want to showcase on your website from the &#8216;<strong>Location<\/strong>&#8216; option. If you want to find any location by latitude and longitude input the addresses on the \u2018<strong>Latitude<\/strong>\u2019 and \u2018<strong>Longitude<\/strong>\u2019 options.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-14.gif\" alt=\"EB Google Maps\" class=\"wp-image-8767\" width=\"840\" height=\"458\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>To add a title and description to your pinned location, insert your \u2018<strong>Title<\/strong>\u2019 and \u2018<strong>Description<\/strong>\u2019 in the respective fields.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-15.gif\" alt=\"EB Google Maps\" class=\"wp-image-8768\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Now, toggle on the \u2018<strong>Use Custom Marker Image<\/strong>\u2019 button and click on the Image<strong> <\/strong>to upload any custom image you wish.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-17.gif\" alt=\"EB Google Maps\" class=\"wp-image-8772\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>You can also use the default map marker and the \u2018<strong>Map Marker<\/strong>\u2019 option. Choose your preferred map marker from the drop-down to make the change.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"813\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-18.gif\" alt=\"EB Google Maps\" class=\"wp-image-8773\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Also, if you want to add another address, click on the \u2018<strong>Add Address<\/strong>\u2019 option. Now, from the \u2018<strong>Addresses<\/strong>\u2019 you provide the details as shown above.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-19.gif\" alt=\"EB Google Maps\" class=\"wp-image-8774\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Map Settings<\/strong><\/h4>\n\n\n\n<p>From the \u2018<strong>Map Settings<\/strong>\u2019 option, choose your map type from the 4 different options. Select any type from the \u2018<strong>Road Map<\/strong>\u2019, \u2019<strong>Satellite View<\/strong>\u2019, \u2018<strong>Hybrid<\/strong>\u2019, and \u2018<strong>Terrain<\/strong>\u2019 map options.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-20.gif\" alt=\"EB Google Maps\" class=\"wp-image-8775\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Then from the \u2018<strong>Map Zoom Level<\/strong>\u2019 option, zoom in or zoom out the map as needed. Then, adjust the \u2018<strong>Map Height<\/strong>\u2019 and \u2018<strong>Marker Size<\/strong>\u2019 as you want.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-25.gif\" alt=\"EB Google Maps\" class=\"wp-image-8780\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style&nbsp;<\/strong><\/h3>\n\n\n\n<p>From the <strong>\u2018Style\u2019<\/strong> tab you will find the options to customize the EB Google Maps appearance. Go to the \u2018<strong>Info Card<\/strong>\u2019 option then adjust the \u2018<strong>Title Color<\/strong>\u2019, \u2018<strong>Title Hover Color<\/strong>\u2019, and \u2018<strong>Typography<\/strong>\u2019 from there.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-26.gif\" alt=\"EB Google Maps\" class=\"wp-image-8781\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>From the below, customize the \u2018<strong>Description Color<\/strong>\u2019 and \u2018<strong>Typography<\/strong>\u2019 as you want. You will find tons of color and typography options there with the description of your pinned location.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-24.gif\" alt=\"EB Google Maps\" class=\"wp-image-8779\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Advanced<\/strong><\/h3>\n\n\n\n<p>From the <strong>\u2018Advanced\u2019 <\/strong>tab you can customize this block and make more changes. Go to the \u2018<strong>Advanced\u2019<\/strong> tab and adjust the <strong>\u2018Margin\u2019 <\/strong>and<strong> \u2018Padding\u2019<\/strong> for your EB Google Maps block. Now, change the \u2018<strong>Background<\/strong>\u2019 and \u2018<strong>Border &amp; Shadow<\/strong>\u2019 to adjust the map with your web layout.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-22.gif\" alt=\"EB Google Maps\" class=\"wp-image-8777\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>From the<strong> \u2018Responsive Control\u2019<\/strong> option, you can hide the EB Google Maps block from any specific device. Now, go to<strong> <\/strong>the <strong>\u2018Animation\u2019 <\/strong>option and add motion effects to the EB Google Maps block just the way you want. You can also adjust the animation speed and delay from there.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-23.gif\" alt=\"EB Google Maps\" class=\"wp-image-8778\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>You can also add \u2018<strong>Custom CSS<\/strong>\u2019 and \u2018<strong>ADDITIONAL CSS CLASS(ES)<\/strong>\u2019 in EB Google Maps. using these two options, you can make changes to the outlook of this block with custom code with ease.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"874\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-21.gif\" alt=\"EB Google Maps\" class=\"wp-image-8776\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Outcome<\/strong><\/h2>\n\n\n\n<p>After making all the changes hit the <strong>\u2018Publish\/ Update\u2019<\/strong> button to showcase your EB Google Maps on your website. Check out how the \u2018<strong>EB Google Maps<\/strong>\u2019 will appear on your WordPress website.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"816\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12.png\" alt=\"EB Google Maps\" class=\"wp-image-8765\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12.png 1600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12-300x153.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12-1024x522.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12-768x392.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12-360x184.png 360w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12-1536x783.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2023\/02\/image-12-600x306.png 600w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>This is how you can add<strong> <\/strong>the<strong> EB Google Maps<\/strong> block in Gutenberg easily.<\/p>\n\n\n\n<p>Getting stuck? Feel free to <a href=\"https:\/\/wordpress.org\/support\/plugin\/essential-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Contact Our Support<\/strong><\/a> for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is how you can use EB Google Maps block to showcase Google Maps on your Gutenberg website using Essential Blocks.<\/p>\n","protected":false},"author":17,"featured_media":8765,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[133],"doc_tag":[],"class_list":["post-8323","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-dynamic-content-blocks"],"year_month":"2026-06","word_count":743,"total_views":"3754","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Ahmed Kawser","author_nicename":"ahmed","author_url":"https:\/\/essential-blocks.com\/author\/ahmed\/"},"doc_category_info":[{"term_name":"Dynamic Content Blocks","term_url":"https:\/\/essential-blocks.com\/docs-category\/dynamic-content-blocks\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/8323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/17"}],"version-history":[{"count":12,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/8323\/revisions"}],"predecessor-version":[{"id":8865,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/8323\/revisions\/8865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/8765"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=8323"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=8323"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=8323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}