If you are a business with a physical presence, you can never underestimate the importance of Google Maps on your website. You need people, visiting your website, to also visit your store, shop, consultancy service, etc. Google Maps Premium Block for Gutenberg is the most advanced, accurate and best solution for providing directions to your business.

Check Gutenberg Google Maps Block demo page from here.

---

---

Google Maps API Key for Google Maps Block

Firstly, you will need to get a valid API key with Google Maps API enabled to insert it in Premium Blocks for Gutenberg Dashboard > Integration > Google Maps and insert it.

Check this detailed tutorial for how to Get Google API key for Maps block.

Second, make sure to enable Enable Maps API JS File option if it's not loaded by theme or any plugin.

---

Google Maps Gutenberg Block Layout Settings

Customize center location, marker, controls and map settings.

---

Gutenberg Google Maps Block Center Locations Options

• Longitude & Latitude: Those two fields are geographical coordinates to identify any location you want to locate on Google Maps. To do this, click on Get your location coordinates from here.

---

Gutenberg Google Maps Block Marker Options

1. Enable Marker: Switch on to add a marker to the map.
2. Max Width: Set max width for marker Description box.
3. Description opened by default: Enable to show marker description box always open by default.
4. Custom Marker Icon: Enable to upload custom marker images.
5. Marker Title: Set title for the marker description box.
6. Marker Description: Inert description for map marker.

---

Gutenberg Google Maps Block Controls Options

1. Map Type: Choose from four different Map Types: Road Map, Satellite, Terrain or Hybrid.
2. Map Height (PX): Set height for map block.
3. Zoom: Set default zoom for Google Maps Block from 1 to 14.
4. Map Type Controls: Turn on to show maps control for the user.
5. Zoom Controls: Enable to allow users to zoom in and out.
6. Street View Control: Enable to allow users to switch to street view.
7. Full Screen Control: Enable to allow the user to open map in full screen mode.
8. Scroll Wheel Zoom: Enable to allow the user to zoom using the mouse wheel.

---

Gutenberg Google Maps Block Map Option

• Style Google Maps block map using Snazzy Maps which will allow you to style map as you like. Just navigate to  Snazzy Maps and style it then copy/paste JavaScript Style Array to Map Style option.

---

Style Settings for Google Maps Gutenberg Block

Customize style options for Google Maps block title/description and map.

---