Google Map

Google Map is a Navigation service provided by google itself.

Users can place an iFrame made with google map into their web page to display any map they want. Google allows a lot more customisation 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.

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

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 widgets panel.

After placing the widget 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 setup your maps API key to use Google Maps service on your web page. Google is most likely to change it’s terms and conditions to use it for different usage over time. Click on the link provided into input box to setup your google maps key.

Pins

Pins is a repeater fields which allows you to add location markers in a map.

Latitude Value

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

Longitude Value

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

Tool-tip Content

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

Tool-tip Icon

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

Minimum Height

Minimum height of the base container of the google map.

Map Zoom

Map zoom is provided by google maps services. Basically they allows you to set a default zoom settings when user initially loads map. Then after using finger/ mouse gestures, map zoom can be changed.

Overlay Content

Map Overlay Content

Enabling this will provide user to push map below in background and have some content over it.

Title

Title or heading for overlay content.

Content

Overlay content.

2. Style

The Style tab is used for customising the appearance of all the Google Map components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Map

Zoom Control

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

Scrolling Wheel

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

Pan Control

A color picker to assign suitable color to the author text.

Draggable

A map can be dragged using left click pressed on single location into all directions.

Map Type Control

User 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

User can make map visible in full screen directly from map’s full screen button.

Street View Control

Control the street view feature provided by google for users.

Variations

Google maps provides different types of maps to show. Select from Road map, hybrid, satellite or terrain.

Custom Style Map

Creative Map Style

Bored using old school google map style ? Check these cool stuff down here.

3. Advanced

Advanced Tab Options are common across all the widgets. 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?