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:
- Google maps settings – map center, zoom and zoom controls,
- Height and width controls using Gutenberg block alignment and resizable components,
- Custom styles,
- Multiple markers with custom icons.
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:
- Use controls in the sidebar and the map will be updated,
- 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!
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.
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.