How to use Gutenberg Google Maps Block

The map block has plenty of customisation options and at the same time my goal was to prevent it from being overloaded with them. So, it has the bare minimum of everything:

I am going to show you each option in action below.

Basiс map settings

Below on the video I am showing you how map settings controls are working. You can see that you can use them both way:

  1. Use controls in the sidebar and the map will be updated,
  2. Or move and zoom the map itself and the controls in the sidebar will be updated.

Check the video to see how it actially works:

Wide/Full width alignment and custom height

The map block has fully functional horizontal alignment and resizable controls. No unneded fields for the map height in the sidebar anymore!

Change Gutenberg Google maps block width and height
Have you noticed that the map colors have been changed? Yes, because I changed its style.

Styles

Currently my Gutenberg Google Maps block supports 4 different styles: Light, Dark, Apple Maps-like and the default one. Styles can be changed for each map individually.

Markers

Look how easy it is to add multiple markers on the map and to change their positioning. Also each marker can have its own custom icon.