← All widgetsWidget 221 · emcp_custom_221

Google Maps

Elementor widget2 layouts18 content options17 style options2 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: map, google, location, address, markers, directions.

Setup guide

  1. Open a page in Elementor, search the panel for Google Maps and drag it into a container.
  2. Content › Map: Mode, Browser API Key, Address / Place, Latitude (overrides address), Longitude, Zoom, Map Type, Style Theme (API mode) and 10 more.
  3. Pick a Mode: Simple embed (no API key), Maps JavaScript API (key, markers, styles). Each one is shown below.
  4. Style tab sections: Map & Card. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Conditional options: Browser API Key appears when Mode is api; Style Theme (API mode) appears when Mode is api; Markers (API mode) appears when Mode is api; Zoom / Type Controls appears when Mode is api; Scroll-wheel Zoom appears when Mode is api; Open First Info Window appears when Mode is api.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Simple embed (no API key)

Mode = embed

Visit us

12 Mall Road
Lahore
Mon-Sat 10:00-19:00

Get directions
Layout

Maps JavaScript API (key, markers, styles)

Mode = api · needs a Google Maps browser key; try it on a test page.

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Map

OptionTypeChoices / rangeDefaultNotes
Mode
mode		DropdownSimple embed (no API key), Maps JavaScript API (key, markers, styles)embed
Browser API Key
api_key		TextA Maps JavaScript API key restricted to this website domain. It is public by design.. Shown when mode = api
Address / Place
address		TextLahore, Pakistan
Latitude (overrides address)
lat		Text
Longitude
lng		Text
Zoom
zoom		Numbermin 1, max 2013
Map Type
map_type		DropdownRoad map, Satellite, Hybrid, Terrainroadmap
Style Theme (API mode)
theme		DropdownStandard, Silver, Dark, Night blue, Retro, Minimal (no POI labels)standardShown when mode = api
Grayscale
grayscale		Slidermin 0, max 100, %0
Markers (API mode)
markers		Repeater1 itemsShown when mode = api
↳ Title
title		TextOur office
↳ Latitude
mlat		Text
↳ Longitude
mlng		Text
↳ Info Window Text
info		Textarea
↳ Custom Pin Image
icon		Image
↳ Pin Color
color		Color#6a11cb
Zoom / Type Controls
controls		Toggleon / offyesShown when mode = api
Scroll-wheel Zoom
scroll_zoom		Toggleon / offShown when mode = api
Open First Info Window
open_info		Toggleon / offShown when mode = api
Click to Activate (prevents accidental scroll capture)
overlay_click		Toggleon / offyes
Card Title
card_title		Text
Card Text
card_text		Textarea
Directions Button Text
card_btn		TextGet directions
Card Position
card_pos		DropdownOver the map, left, Over the map, right, Below the mapleft

Style tab

Map & Card

OptionTypeChoices / rangeDefaultNotes
Height
height		Slidermin 200, max 1000, px/vh460Responsive
Radius
radius		Slidermin 0, max 60, px16
Border
border		Border
Shadow
shadow		Box shadow
Card Background
card_bg		Color#ffffff
Card Width
card_w		Slidermin 200, max 500, px300
Card Padding
card_pad		Dimensions
Card Radius
card_radius		Slidermin 0, max 40, px14
Card Shadow
card_shadow		Box shadow
Card Title Typography
title_typo		Typography
Card Title Color
title_color		Color#101828
Card Text Typography
text_typo		Typography
Card Text Color
text_color		Color#475467
Button Text
btn_color		Color#ffffff
Button Background
btn_bg		Color#6a11cb
Button Radius
btn_radius		Slidermin 0, max 60, px8
Activate Overlay Text
overlay_text_color		Color#ffffff

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_221" and a settings object using the keys above. Run get-custom-widget with id 221 for the full JSON spec.