{"id":1588,"date":"2024-03-18T06:26:56","date_gmt":"2024-03-18T06:26:56","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1588"},"modified":"2024-04-10T08:54:41","modified_gmt":"2024-04-10T08:54:41","slug":"google-map","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/google-map\/","title":{"rendered":"Google Map"},"content":{"rendered":"\n

Google Maps block allows you to showcase the map on the page and post on your site. It lets share the exact location of your business or any place of interest.<\/p>\n\n\n\n

\"Adding
Adding Google Map Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Google Map block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

General<\/h3>\n\n\n\n
    \n
  • Address\/Location – <\/strong>Under this option, you can add the address of the location you want to mark on the map.<\/li>\n\n\n\n
  • Map Height<\/strong> – It lets you adjust the height of the map.<\/li>\n\n\n\n
  • Zoom<\/strong> – You can adjust the zoom level of the map that defines how large or small the contents of a map appear in a map view. <\/li>\n<\/ul>\n\n\n\n
    \"Add
    Add Location, Set Height, and Zoom <\/figcaption><\/figure>\n\n\n\n

    Style<\/h2>\n\n\n\n

    Under the style settings, you’ll find the following options available:<\/p>\n\n\n\n

    Background<\/h3>\n\n\n\n
      \n
    • Type<\/strong> – It sets the background color of the Map. You can change the visual appearance of the background by changing its color or adding an image. <\/li>\n<\/ul>\n\n\n\n
      \"Change
      Change Background Color<\/figcaption><\/figure>\n\n\n\n

      Border<\/h3>\n\n\n\n

      It customizes the Border area added around the block and comes with the following options:<\/p>\n\n\n\n

        \n
      • Type<\/strong>\u00a0\u2013 You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders for the block.<\/li>\n<\/ul>\n\n\n\n

        When you select none, you will be given the following option:<\/p>\n\n\n\n

          \n
        • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for the border.<\/li>\n<\/ul>\n\n\n\n

          However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

            \n
          • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
          • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
            \"Add
            Add and Customize Border<\/figcaption><\/figure>\n\n\n\n
              \n
            • Box Shadow<\/strong> \u2013 When you enable the Box Shadow option, you will get the following customization options:\n
                \n
              • Color<\/strong> \u2013 It allows you to select the appropriate box-shadow color for the Map.<\/li>\n\n\n\n
              • Horizontal-X<\/strong> \u2013 It displays the box shadows in the horizontal position.<\/li>\n\n\n\n
              • Horizontal-Y<\/strong> \u2013 It displays the box shadows in the vertical position.<\/li>\n\n\n\n
              • Blur<\/strong> \u2013 You can set up the blur value of the box shadows appearing.<\/li>\n\n\n\n
              • Spread<\/strong> \u2013 The shadow\u2019s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site\u2019s requirements.<\/li>\n\n\n\n
              • Position<\/strong> \u2013 You can set the position of the box shadows as Inset<\/strong> or Outline<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                \"Add
                Add Box Shadow Effect<\/figcaption><\/figure>\n\n\n\n

                Advanced<\/h2>\n\n\n\n

                The Advanced section consists of four options for the Google Map block.<\/p>\n\n\n\n

                Spacing<\/h3>\n\n\n\n

                Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                  \n
                • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                • Block Padding <\/strong>– According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                  \"Manage
                  Manage Padding and Margin Space<\/figcaption><\/figure>\n\n\n\n

                  Z-Index<\/h3>\n\n\n\n

                  It allows you to set the priority of the Google Map block according to the site requirement.<\/p>\n\n\n\n

                  Responsive Condition<\/h3>\n\n\n\n

                  Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                    \n
                  • Hide on Desktop<\/strong> \u2013 It hides the Google Map block on the Desktop.<\/li>\n\n\n\n
                  • Hide on Tablet<\/strong> \u2013 It hides the Google Map block on the Tablet.<\/li>\n\n\n\n
                  • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Google Map on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                    \"Enable\/Disable
                    Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                    Advanced<\/h3>\n\n\n\n

                    Under the option, you can set the CSS ID and Classes for the Google Map block. The available options are listed below:<\/p>\n\n\n\n

                      \n
                    • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style the block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                    • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                      \"Add
                      Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                      After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                      Google Maps block allows you to showcase the map on the page and post on your site. It lets share the exact location of your business or any place of interest. After you have chosen the Google Map block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General,[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1588"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1588"}],"version-history":[{"count":9,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1588\/revisions"}],"predecessor-version":[{"id":2774,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1588\/revisions\/2774"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1588"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1588"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}