Google Map is a Navigation service provided by Google itself.
Users can place an iFrame made with google Maps into their web page to display any map they want. Google allows a lot more customization for maps than you can think. Other than watching your own house, you can plan a trip, navigate through buildings, see inside places, create offline maps and much more.
How to use the Google Map Block of The Plus Addons For Gutenberg
This block is used to display Map, Location, Point, etc. Let’s understand how to use this block in the tutorial below.
Configuration for Google Map
We ask for latitude and longitudes to display exact map location, and instructions to find them are also stated below the input boxes. Get your Google map API key, paste it into general settings and start riding.
Adding Google Maps To WordPress
Then once you have the API key you need to open the plus settings and then go to the extra setting options and find the Google Maps API section as shown in the video below. Then paste the API key in the respective field.
Gutenberg gives multiple ways to add Google Map into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Google Map after “/” sign, eg.“/Google Map”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.
After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
Setup/ Edit Google Map API Key
You have to set up your maps API key to use the Google Maps service on your web page. Google is most likely to change its terms and conditions to use it for different usage over time. Click on the link provided into the input box to set up your google maps key.
Pins are repeater fields that allow you to add location markers to a map.
Add the Latitude value of the location you want to mark. See the instruction using the link provided below the input.
Add the Longitude value of the location you want to mark. See the instruction using the link provided below the input.
A tool-tip is hover/ click text on the location marker. Add it here.
If you don’t want the typical red location marker provided by google, drop your custom icon here.
Select image size from slandered size drop down provided by the plus.
Minimum height of the base container of the google map.
Map zoom is provided by google maps services. Basically, they allow you to set default zoom settings when the user initially loads the map. Then after using finger/ mouse gestures, map zoom can be changed.
Overlay Content ⭐
Map Overlay Content
Enabling this will provide the user to push the map below in the background and have some content over it.
Title or heading for overlay content.
Description for overlay content.
The Style tab is used for customizing the appearance of all the Google Map components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
Enabling this would allow users to use zoom gesture for map.
Enabling this would allow the user to control zoom by scrolling the mouse wheel on the map.
A color picker to assign a suitable color to the author’s text.
A map can be dragged using left click pressed on a single location in all directions.
Map Type Control
Users can switch from normal map to satellite map directly from the map.
Put in some outer space to an element.
Full Screen Control
Users can make the map visible in full screen directly from the map’s full screen button.
Street View Control
Control the street view feature provided by Google for users.
Google maps provide different types of maps to show. Select from Road map, hybrid, satellite or terrain.
Custom Style Map ⭐
Custom Map Style
Enable option for select custom map style.
Creative Map Style
Bored using old school google Maps style? Check this cool stuff down here.
Apply suitable background like color/ gradient to an element.
Assign a size, weight, spacing and much more to the title text.
A color picker to assign a suitable color to the title text.
Assign a size, weight, spacing and much more to the description text.
A color picker to assign a suitable color to the description text.
Toggle Button Color
A color picker to assign a suitable color to the toggle button.
Toggle Active Color
A color picker to assign a suitable color to the toggle active button.