Google Map

Google Map

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.

Pro tip
Google maps provides back in time street views. So if some street got reconstructed, you can check how this street used to look like earlier in time.

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.

Table Of Contents

Adding Google Maps To WordPress

To use the Google Maps block first you need to add the Google Maps API key in the Plus settings. If you do not know how to get the API key then visit this link https://developers.google.com/maps/documentation/javascript/get-api-key. This page has all the steps you require to get an API key. A screenshot of the same is posted below.

Get API key for Google Maps Block

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.

Setting up

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.

1. Layout

Content

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

Pins are repeater fields that allow you to add location markers to a map.

Latitude Value

Add the Latitude value of the location you want to mark. See the instruction using the link provided below the input.

Longitude Value

Add the Longitude value of the location you want to mark. See the instruction using the link provided below the input.

Tooltip Content

A tool-tip is hover/ click text on the location marker. Add it here.

Tooltip Icon

If you don’t want the typical red location marker provided by google, drop your custom icon here.

Image Size

Select image size from slandered size drop down provided by the plus.

Minimum Height

Minimum height of the base container of the google map.

Map Zoom

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

Title or heading for overlay content.

Description

Description for overlay content.

2. Style

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

Map

Zoom Control

Enabling this would allow users to use zoom gesture for map.

Scrolling Wheel

Enabling this would allow the user to control zoom by scrolling the mouse wheel on the map.

Pan Control

A color picker to assign a suitable color to the author’s text.

Draggable

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.

Scale Control

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.

Variations

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.

Overlay Content

Background

Apply suitable background like color/ gradient to an element.

Title Typography

Assign a size, weight, spacing and much more to the title text.

Title Color

A color picker to assign a suitable color to the title text.

Description Typography

Assign a size, weight, spacing and much more to the description text.

Description Color

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.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.