manifest / builders / service-area-map

Service Area Map

Custom Elementor widget that overlays a Google Maps embed with interactive, multi-location service pins and contact-enabled tooltip cards.

by Usman Tayyab · github.com/imusmantayyab/service-area-map

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/imusmantayyab/service-area-map/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/imusmantayyab/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" `