How to add a Google map to a WordPress Website

Add a Google map without using iframes or code knowledge. It provides an easy and fast process for creating unlimited markers, legends, map styles, and customizing other settings. The map widget can enhance any type of site, be it a blog of travelers visiting places around the world, a business company with multiple locations, or a real estate agency showing key features of the area.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Once you install and activate the plugin, go to Elementor>Gmaper for Elementor>Google Maps API Key and enter your own API key. How to get the key read in the documentation.

Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

The Content section has all the basic Google map settings like coordinates, markers, legends, display options, etc.

Center location

Specify the coordinates of the central location on the map. Read how to get your place coordinates.

Latitude

Specify the latitude of the center map location.

Longitude

Specify the longitude of the center map location.

User location

The option allows you to auto-detect the user location and display it as a central location.

Latitude and longitude of central map location

Map settings

  • Map type – select one of the available map types: Road map, Satellite, Terrain, Hybrid.
  • Zoom – set the map zoom which will be displayed for visitors by default.
  • Overlay – the toggle to enable/disable overlay layer for the map box which can be customized in different styles on the Style tab.
  • Scroll wheel zoom – the toggle to enable/disable the ability to zoom the map using a wheel.
  • Info container always opened – the option allows you to keep always open the block with additional information about the location.
  • Info container open on hover – the option allows you to open on hover the block with additional information about the location.
  • Zoom controls – the toggle to enable/disable the display of zoom buttons on the map.
  • Full screen control – the toggle to enable/disable the display of the fullscreen mode button on the map.
  • Disable map drag – the toggle to enable/disable the ability to drag the map.
  • Show legend – the option allows you to display the legend on the map.
  • Map type control – the toggle to enable/disable the map type control buttons on the map.
  • Street view control – the toggle to enable/disable the street view button on the map.
  • Hide logo – the toggle to enable/disable the Google logo in the bottom left corner of the map.
  • Hide copyright – the toggle to enable/disable the Google copyright in the bottom right corner of the map.
  • Hide terms of use – the toggle to enable/disable the Google term of use in the bottom right corner of the map.
  • Hide report a map error – the toggle to enable/disable the Google Report of problem in the bottom right corner of the map.
  • Hide keyboard shortcuts – the toggle to enable/disable the keyboard shortcuts in the bottom right corner of the map.
A map example with almost all map settings enabled

Legend

A section for adding the required number of legends for the map box.

To add a new legend, click “Add Item” and fill or edit all the fields.

Legend settings of the Gmaper
  • Title – a field to enter the title of the legend section.
  • Legend Image – select an image from the media library for a new item.
  • Icon size – specify the icon/image size of the item.
  • Title – a field to enter the title of the item.

Marker

A section for adding the required number of markers for the map box.

To add a new marker, click “Add Item” and fill or edit all the fields.

Marker settings of the Gmaper
  • Choose Image – select an image from the media library for a new item.
  • Rectangular image – an option allows using rectangular images. When it is disabled the image will be square.
  • Custom marker size – specify the icon/image size of the item.
  • latitude – specify the latitude of the marker.
  • longitude – specify the longitude of the marker.
  • Title – a field to enter the title of the item.
  • Description – a text area to enter the description of the item.

Map styles

Select one of the available map styles or use the JSON code for your custom style.

Standard
Standard map style
Silver
Silver map style
Retro
Retro map style
Dark
Dark map style
Night
Night map style
Aubergine
Aubergine map style
Custom

Enter your Json code to change the map style.

Style tab

On the style tab, you can manage the Google Map, marker, and legend styles like colors, size, typography, borders, padding/margin, etc.

Map

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Height – specify the height of the map box.
  • Width – specify the width of the map box.
NORMAL/HOVER

The map style settings for different states.

  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Overlay

  • Color – specify the color and opacity for the map overlay using the color picker.
  • Blend Mode – select one of the available blend modes.

Marker title/Marker description/Legend title

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The text style settings for different states.

  • Color – specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Legend

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Height– specify the height of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
NORMAL/HOVER

The legend style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Legend items

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The item style settings for different states.

  • Color – specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Was this article helpful to you?