Service Area Map

A custom Elementor widget for WordPress that turns a Google Maps embed into an interactive, multi-location "service area" map — pins, permanent labels, and contact-enabled tooltip cards, all configurable from the Elementor editor.

Version: 1.0.1 · Author: Usman Tayyab · Requires: WordPress 5.6+, PHP 7.4+, Elementor 3.0+

Overview

Service Area Map registers a single Elementor widget (Service Area Map) that overlays a Google Maps embed with any number of positioned pins. Each pin can show a permanent text label with a connector line, and opens a tooltip "card" with a title, a service-page link, a directions link, and phone/email/WhatsApp contact buttons. Card behavior (hover, click, always-on, or an auto-cycling step-through) and mobile layout (centered modal, bottom sheet, or the desktop tooltip style) are both configurable per-breakpoint from the widget's Content and Style tabs — no page reload required, since the map itself is a plain iframe embed rather than the Google Maps JavaScript API.

Problem It Solves

A multi-location business (the reference use case bundled as demo data is a company with branches across Dubai) needs to show "where we serve" on one map, with each location individually clickable for its own contact details and directions — without pulling in a full JS mapping SDK, an API key, or a heavier map-plugin dependency, and while staying inside the Elementor page-building workflow the rest of the site already uses. Off-the-shelf Google Maps blocks typically show one embed with no interactive per-location overlay; general-purpose "pin/marker" plugins are usually not Elementor-native or don't expose per-pin contact actions (call / email / WhatsApp) alongside directions and a service-page link. This widget was built to close that specific gap as a first-class Elementor widget that a non-developer can configure entirely through Elementor's own repeater and style controls.

Key Features

• Iframe-based base map — accepts either a full Google Maps "Share → Embed" `