Gutenberg Google Maps Block Tutorial

Introduction

Enrich your WordPress website’s functionality with Gutenberg Content Switcher Block, which allows users to effortlessly switch between monthly and yearly information. Our comprehensive content switcher tutorial for Gutenberg’s page builder is designed by Premium Blocks to assist you in integrating this interactive feature into your site. With straightforward instructions, you can add a dual-view content switcher that is perfect for displaying subscription options, time-based services, or any content that requires a periodic perspective. This addition will simplify your site’s navigation, making it more accessible and accommodating for users who wish to compare different plans or data over various time frames.

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Google Maps Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Google Maps Block to your Gutenberg editor. From there, you can customize it to suit your design.

Layout Settings

  • Center Location
  • Longitude: Users can enter the longitude coordinate to specify the east-west position where the map will be centered.
  • Latitude: Users can enter the latitude coordinate to determine the north-south position for the map’s central focus.
  • Alignment: Align the switcher to the left, center, or right of its container.

Get your location coordinates from here: This link (marked “here”) directs users to LatLong.net site to help you find geographic coordinates for their map’s central location.

Gutenberg Google Maps Block - Layout Settings including the longitude and latitude
Gutenberg Google Maps Block – Layout Settings

Marker

  • Enable Marker: Enable Gutenberg Google Maps’ marker.
  • Description opened by default: Enable to preview the marker’s description by default.
  • Custom Marker Icon: Enable using a custom icon for the marker.
  • Marker Title: Add the marker’s title.
  • Marker Description: Add the marker’s description.
  • Custom Marker Icon: Select the custom marker icon from your library or upload a new one.
  • Max Width: Sets the marker’s maximum width.
Gutenberg Google Maps Block Marker Options: description, custom marker icon, title, and icon width
Gutenberg Google Maps Block – Marker Options

Controls

  • Map Type: Select the map’s type such as Road Map, Satellite, Terrain, or Hypird.
  • Map Height: Set the Map’s height in pixels.
  • Zoom: Select the map’s zoom degree.
  • Map Type Controls: Enable the map’s type controls.
  • Zoom Controls: Enable the zoom controls on Gutenberg Google Maps block.
  • Street View Controls: Enable the street view controls.
  • Full-Screen Controls: Enable the full-screen controls.
  • Scroll Wheel Controls: Enable the scroll wheel controls using the mouse wheel.
Gutenberg Google Maps Block Controls Settings: map type, map height, zoom, maptype controls, zoom controls, street view control, full screen control, scroll wheel zoom.
Gutenberg Google Maps Block – Controls Settings

Map

  • Maps Style: Input fields to add a map style code, you can use sites such as Snazzy Maps.
Gutenberg Google Maps Block – Maps Style

Gutenberg Google Maps – Style

Title Style

  • Typography: Settings for font size and style.
  • Text Color: A color picker to select the text color.
  • Margin: Sets the outer spacing around the title, with the ability to adjust for each side independently.
  • Padding: Controls the inner spacing between the title and the borders of the container, with individual adjustments for each side.
Gutenberg Google Maps Block Title Style: typograph, text color, margin, and padding.
Gutenberg Google Maps Block – Title Style

Description Style

  • Typography: Settings for font size and style.
  • Text Color: A color picker to select the description’s text color.
  • Margin: Sets the outer spacing around the description, with the ability to adjust for each side independently.
  • Padding: Controls the inner spacing between the description and the borders of the container, with individual adjustments for each side.
  • Align: Options to align description text within the block include left, center, and right alignment.
Gutenberg Google Maps Block Description Style: typograph, text color, margin, and padding.
Gutenberg Google Maps Block – Description Style

Map Style

  • Box Shadow: Customize the shadow effect around the map Box
  • Border: Select the map’s border style (solid, dotted, dashed, etc.).
  • Border Radius: Set the border radius, affecting how rounded the corners will be.
  • Margin: Sets the outer spacing around the map box, with the ability to adjust for each side independently.
  • Padding: Controls the inner spacing between the map box and the borders of the container, with individual adjustments for each side.
Gutenberg Google Maps Block Map Style: box shadow, border, border radius, margin and padding
Gutenberg Google Maps Block – Map Style

Conclusion

Gutenberg Google Maps Block Tutorial empowers businesses to effectively integrate Google Maps into their websites, connecting online visitors to their physical locations. With extensive customization options for center locations, markers, and controls, you can create a map that not only guides users efficiently but also enhances the overall user experience. Start leveraging the Premium Google Maps Block for Gutenberg today and bridge the gap between your online presence and physical location. Check out the working demos for inspiration and begin enhancing your site’s navigation.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks