Back to Advanced & Developer

How do I build an embeddable charge point map for my website?

Help Center / Integration guides / Advanced & Developer / How do I build an embeddable charge point map for my website?

For: operators using Monta Hub.

The Map widget builder lets you create an embeddable version of the Monta charge point map for your own website — branded to your colours and scoped to your charge points — without writing any code. You adjust a form, watch a live preview, and copy a ready-to-paste <iframe> snippet.

The builder doesn't save anything — the map you copy is the finished product. Each setting simply changes the map; nothing is stored against your account.

Where to find it

  1. In Monta Hub, open Developer tools in the left navigation.
  2. Select Map widget builder.

If you don't see it, the feature isn't enabled for your operator yet — contact Monta to have it switched on.

How it works

The page has two columns: a settings form on the left, and a live preview with the embed code on the right.

  1. Adjust the settings on the left (see below).
  2. Click Build preview (the bar at the bottom) to apply your changes — the preview on the right updates to match.
  3. When you're happy, use Copy snippet to copy the <iframe> code and paste it into your website.

The preview only updates when you click Build preview, so the map stays stable while you're editing and the code you copy always matches what you see.

What you can configure

  • Location & navigation — where the map centres (latitude, longitude) and the starting zoom. If you don't set a centre, the map automatically fits to your charge points.
  • Branding — turn on Use my operator branding to apply your theme colours and logo. You can also set the loading-bar colour and the background colour behind your logo.
  • Map style — the base map look, marker style, overall interface style (standard Monta or a slimmer white-label look), and tooltip style.
  • Marker styling — recolour the map pins, including separate colours for available, busy, disconnected, and error states, and choose the marker size.
  • Country overlay — when zoomed out, the map shows countries instead of pins; set the highlight and fill colours and how strong the fill looks.
  • Filters — show only available chargers, limit to certain charging speeds, restrict the map to your operator (and choose whether visitors can change that), include roaming operators, and scope to specific promotions.
  • Map controls — decide which on-map controls visitors see (filter panel, price filter, best-price button, location details, share button, etc.), and optionally lock the map so visitors can't pan or zoom.
  • Language — pick the map language, and optionally hide the in-map language switcher.

Editing an existing map

Already have a map embedded and want to tweak it? Use Paste existing embed: paste your current <iframe> code (or the map link), and the builder fills in all the settings so you can adjust and re-copy.

Good to know

  • The embed always points to the live Monta map (maps.monta.app); the map itself keeps your charge point data up to date.
  • The copied code only includes the settings you changed, so it stays short and readable.
  • If you set an operator filter, the "include roaming operators" option turns off automatically, because the map already limits results to your network.