Gutenberg Google Maps Block Tutorial

Intro

In today’s digital age, integrating Google Maps on your website is essential for businesses with a physical location. Gutenberg Google Maps Block Tutorial guides you through adding and Google Maps customization to provide precise directions to your storefront, consultancy service, or any physical presence. This advanced solution enhances user experience by facilitating easy navigation from smartphones. Discover the power and simplicity of the Premium Google Maps Block for Gutenberg, designed to connect your online visitors with your physical location.

Using Google Maps, users can easily navigate location mapping from their smartphones.

But don’t take our word for it. Try Gutenberg Google Maps Block from here and see how powerful and easy it is to use.

Here are the Key Features of Google Maps Block:

Gutenberg Google Maps Block Key Features

• Center Location
• Marker
• Marker Title Style
• Marker Description Style
• Controls
• Map Style

1. Center Location Options

This segment is quite technical in nature. You need to manually input Longitude and Latitude. To do this, click on Get your location coordinates from here which.will take you to another website. Here, you will write your location as an input, and receive Longitude/Latitude as an output. Paste the numbers and you will a location on the map. Here is how to do it:

2. Marker Options

Marker is a blip appearing on your selected location on the Google Maps Premium Gutenberg Block. Under Marker, you will find numerous options that allow you to customize the looks of Marker. You can write Marker Title along with Descriptions as well as adjust the width and spacing of the text. You can also change your custom Marker Icon by enabling Custom Marker Icon option and selecting the file on WordPress.

Do note that only once you enable the Marker, you will see its corresponding options. If it is disabled, there will be no settings shown. Here are all options:

• Enable/Disable Marker
  • Marker Title
  • Marker Description
  • Spacing (PX)
  • Description opened by Default
  • Description Alignment
  • Custom Marker Icon (Enable/Disable)
  • Description Box Max Width (PX)
  • Description Box Padding (PX)

3. Marker Title Style Options

Google Maps Premium Block for Gutenberg has several styling options. You can even decide to change the size and color of Location Title:

• Font Size (PX)
• Text Color

4. Marker Description Style Options

Similar to Marker Title Style Options, you can change the font color and size for location description:

• Font Size (PX)
• Text Color

5. Controls Options

Under Control Options, you can adjust everything from how you want the Google Maps Premium Block to appear to enabling/disabling several features. You can select Map Type from dropdown menu. Other than this, you can also adjust Maximum Height.

The last 5 options can be enabled/disabled depending upon your preferences and requirements.

• Map Type
  • Road Map
  • Satellite
  • Terrain
  • Hybrid
• Max Height (PX)
• Zoom
• Map Type Controls
• Zoom Content
• Street View Control
• Full Screen Control
• Scroll Wheel Zoom

---

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.