Welcome to this easy-to-use guide on utilizing Gutenberg Google Maps Block! This article provides a straightforward and user-friendly overview to help you integrate interactive maps into your WordPress site using Premium Blocks‘ Google Maps Block. With just a few simple steps, you can add a fully customizable map to your Gutenberg editor, allowing you to showcase locations, provide directions, or highlight areas of interest. Whether you’re new to Gutenberg or looking to enhance your site’s interactivity, this guide will walk you through each feature and setting and will walk you through the process of adding your Google Maps API key to unlock the full potential of Gutenberg Google Maps Block., ensuring a seamless experience in adding maps to your website. Let’s get started!
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.
First integrate Google Maps API with the Premium Blocks for Gutenberg. Elevate your WordPress site by seamlessly embedding interactive maps into your content. This tutorial will walk you through the process of adding your Google Maps API key to unlock the full potential of Gutenberg Google Maps Block. By the end of this guide, you’ll be equipped to enhance your site’s navigation and provide a richer user experience with dynamic maps.
How to Use Google Maps Block?
First, you need to obtain a Google Maps API key and follow the instructions on the Google Cloud Platform.
Access Settings: Navigate to your WP Dashboard > Premium Blocks > Settings tab.
Google Maps API Key: Enter your Google Maps API key in the provided field.
Enable Maps API JS File: Ensure the checkbox is ticked to enable the API JS file if another theme or plugin does not include it.
Save Settings: Click the ‘Save’ button to apply the changes.
Integrate Google Maps API Key
Now that you have enabled the Google Maps API, you can add and customize maps on your Gutenberg blocks.
Start Customizing Gutenberg Google Maps Block
Layout Settings
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.
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
Marker
Enable Marker: Enable Gutenberg Google Maps’ marker.
Description opened by default: Enable to preview the marker’s description by default.
Custom Marker Icon: Use a custom icon for the marker, if enabled you can select the custom marker icon from your library or upload a new one, also you can set the marker’s maximum width.
Marker Title: Add the marker’s title.
Marker Description: Add the marker’s description.
Gutenberg Google Maps Block—Marker Options
Controls
Map Type: Select the map’s type, such as Road Map, Satellite, Terrain, or Hybrid.
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-ScreenControls: Enable the full-screen controls.
Scroll Wheel Controls: Enable the scroll wheel controls using the mouse wheel.
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 Block – 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
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
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
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.
