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.
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.
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.
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 is a repeater fields which allows you to add location markers in a map.
Add Latitude value of the location you want to mark. See the instruction using the link provided below the input.
Add 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 location marker. Add it here.
If you don’t want typical red location marker provided by google, drop your custom icon here.
Minimum height of the base container of the google map.
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 or heading for overlay content.
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
Enabling this would allow user to use zoom gesture for map.
Enabling this would allow user to control zoom by scrolling mouse wheel on map.
A color picker to assign suitable color to the author text.
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.
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.
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.