iDeisignBucket

<p>Google Maps for Gutenberg is a simple, lightweight flexible google map plugin which allows you to create a map with one click. It has tons of features such as full width map, 17 different custom map styles, custom width and height attributes. Easy and Flexible !!</p>
<p>Gutenberg is now a core feature so please update to WordPress v5, or install the <a href="https://wordpress.org/plugins/gutenberg/" rel="ugc">Gutenberg plugin</a>.</p>
<p>This plugin <strong>requires</strong> WordPress <code>5.0</code> or greater.</p>
<h4>Plugin Features</h4>
<p>Works as any other Gutenberg block with the following settings:<br />
* 17 Different Map Styles<br />
* Scroll Zoom<br />
* Map Width and Height Features<br />
* Full Width Map Styles (Entire Screen)<br />
* Upload Custom Marker for your map<br />
* Easy and Flexible<br />
* Customize Everything<br />
* And many more..</p>
<h3>API Key</h3>
<p>This plugin requires an API key to interact with Google Maps. Without an API key maps will not be displayed.</p>
<p>To obtain an API key follow these steps:<br />
1. Create a new project in the Google Developer’s console by clicking <a href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend,maps_embed_backend&keyType=CLIENT_SIDE&reusekey=true" rel="nofollow ugc">here</a> and selecting <em>Create new project</em><br />
2. Name your project<br />
3. Select <em>HTTP referrers (web sites)</em>  for the <em>Key restriction</em> type<br />
4. Enter the domains where your API key will be used<br />
    – Example: <code>*.mysite.com</code><br />
5. Click the <em>Create</em> button<br />
6. Write your API key down in a safe place<br />
7. Enter the API key into the plugin settings</p>
<p>Note: The API key will be exposed publicly to generate the map. It is important to <a href="https://developers.google.com/maps/documentation/embed/get-api-key#key-restrictions" rel="nofollow ugc">restrict your API key</a> so others do not abuse it. The API key will be used, and displayed, in both the WordPress editor and the front end of the site.</p>


Google Map for Gutenberg Block

Google map for Gutenberg. Fast, Simple, Flexible with rich in features.

Michael

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/6c2Rdi4o5MU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<a href="https://superblockslider.com/slider-showcase/" rel="nofollow ugc">Slider examples</a></p>
<p>A lightweight image & content slider plugin. Allows for full control over the content layout and design.</p>
<h4>Lightweight</h4>
<p>Standalone 5KB JavaScript file, optimize for loading speed and performance.</p>
<h4>Content slider</h4>
<p>Highly flexible and customizable content, giving you full control over the content layout and design by using any blocks in the content area.</p>
<h4>Image slider</h4>
<p>Customize each slide’s background image and visual presentation of your sliders.</p>
<h4>Supports block & classic editor</h4>
<p>Works for block editor and classic editor(via shortcode. example: [superblockslider id=”123″]).</p>
<h4>Gradient / color overlay</h4>
<p>Enhance the visual impact of your sliders by applying gradient or solid color overlays, creating an eye-catching backdrop for your content.</p>
<h4>Responsive slider</h4>
<p>Set different background images for desktop, tablet, and mobile screen sizes.</p>
<h4>Live Editor Preview</h4>
<p>Preview your slider’s appearance in real-time within the WordPress editor, making it easy to fine-tune and perfect the design before publishing.</p>
<h4>Touch & mouse drag</h4>
<p>Supporting both touch and mouse swipe gestures, providing a seamless user experience on touchscreen devices and desktops.</p>
<h4>Title or Dot Icon Navigation</h4>
<p>Customize the navigation with title-based navigation or dot icons.</p>
<h4>Parallax Effect</h4>
<p>Add a visually appealing parallax effect to your slider, this effect creates a captivating scrolling experience by moving the background at a different speed than the foreground content.</p>
<h4>Adaptive slider height</h4>
<p>The slider’s height adjusts automatically based on the background size, ensuring that your slides are displayed properly.</p>
<h4>Transition Animations</h4>
<p>Choose from 20 transition animations to add dynamism and flair to your sliders.</p>
<h3>Featured highlight</h3>
<ul>
<li><a href="https://superblockslider.com/slider-showcase/#transition-efect" rel="nofollow ugc">Slide</a>, <a href="https://superblockslider.com/slider-showcase/#transition-efect" rel="nofollow ugc">fade</a> effect</li>
<li><a href="https://superblockslider.com/slider-showcase/#adaptive-height" rel="nofollow ugc">Adaptive slider height</a></li>
<li>Set multiple background image for responsive screen size</li>
<li><a href="https://superblockslider.com/slider-showcase/#demo" rel="nofollow ugc">Title-based</a> navigation or <a href="https://superblockslider.com/slider-showcase/#transition-efect" rel="nofollow ugc">dot icons</a></li>
<li><a href="https://superblockslider.com/slider-showcase/#demo" rel="nofollow ugc">Parallax background effect</a></li>
<li>20 slide <a href="https://superblockslider.com/slider-showcase/#transition-animations" rel="nofollow ugc">transition animations</a></li>
<li><a href="https://superblockslider.com/slider-showcase/#overlay" rel="nofollow ugc">Gradient or solid color overlay</a></li>
</ul>
<h4>Links</h4>
<p><a href="https://superblockslider.com/slider-showcase/" rel="nofollow ugc">Slider examples</a><br />
<a href="https://superblockslider.com/documentations/" rel="nofollow ugc">Documentations</a></p>


Super block slider – Image & content slider

Lightweight image & content slider for block and classic editor.

Google Map for Gutenberg Block vs Super block slider – Image & content slider