Skip to content
Make maps

Map widgets for your website

Choose a widget, set the place, colors and size, and copy the code. It works on any site where you can paste HTML: WordPress, Wix, Squarespace, Shopify and more. Free, with no sign-up and no cookies.

Choose the widget

A circle around a point, with its area and perimeter.

Center of the circle

Example 39.09970, -94.57860 · Coordinates work too: “39.0997, -94.5786”.

For example, your store’s name. It shows next to the center of the circle.

Units

Unchecked, the circle stays put: best for a delivery or service area.

Look
Theme
Color
Widget language
Size

Fills the full width of its space, on phones too. You choose the height.

More options

Screen readers read it out: say what the map shows.

The widget doesn’t load until the visitor scrolls to it, so your page opens faster.

Preview

Open the widget in a new tab

Code to paste into your website

It’s optional: the widget works the same without it. If you keep it, you help keep Mapsfera free.

<iframe
  src="https://mapsfera.pages.dev/embed/radius/#lat=39.0997&lng=-94.5786&r=25&u=mi&name=Kansas+City,+MO"
  style="border:0;width:100%;height:420px"
  title="Map of a 25-mile radius around Kansas City, MO"
  loading="lazy"
  referrerpolicy="no-referrer"
  allowfullscreen>
</iframe>
<p style="margin:6px 0 0;font-size:14px">Made with the <a href="https://mapsfera.pages.dev/tools/radius-map/">radius map tool</a> from Mapsfera</p>

Next step

The full tools, with everything that doesn’t fit in a widget.

Radius mapSeveral circles, the states and counties they touch, PNG, GeoJSON and KML. Distance between two pointsBy road too, by car, bike or on foot. Google Maps embed codeThe code to embed a Google or OpenStreetMap map.

How to use it

  1. Choose the widget

    Radius map, distance between two points or blank map.

  2. Set it up

    The center and radius, the two points or the map; light or dark theme, color, language and size. The preview updates as you go, and you can check it at phone width.

  3. Copy and paste

    Press “Copy the code” and paste it into an HTML block on your site. The steps for the most popular platforms are below.

What each widget is for

  • Radius map

    A delivery, service or coverage area: a 5-mile circle around your store, with its area. If you let visitors move it, it becomes a radius calculator for an article or a guide.

  • Distance between two points

    The straight-line distance from your hotel, club or venue to another place. Or a calculator your readers can use by dragging the two points.

  • Blank map

    For class, geography or travel blogs: US states, the world, Europe, and Spain by province or by region, plain or with numbers, names or capitals. Tap a region to see its name.

  • Matches your site

    Light, dark or automatic theme, your brand color, and English or Spanish. The widget brings no fonts or styles that clash with yours: it sits in its own frame.

How it works

The code is an <iframe>, the HTML tag that shows one page inside another: a Mapsfera page made just for that, with no menus or ads. Your choices go in its address, after the hash (#): the point, the radius, the units, the theme and the color. Whatever comes after the hash never reaches any server, and you can edit it by hand.

The math is the same as in the full tools. The circle’s area is worked out on a sphere, which is the circle drawn on the map. The distance is measured on the WGS84 ellipsoid with GeographicLib, the same reference GPS uses: it’s the shortest line over the Earth, which looks curved on the map for long trips.

The radius and distance maps use MapLibre with the OpenFreeMap base map (OpenStreetMap data). The blank map is an SVG drawing that comes ready inside the page: no map tiles and no map engine.

Area of a circle on a sphere

A = 2πR² (1 − cos(r/R))

r is the radius and R is the Earth’s mean radius, 6,371 km (3,959 mi). For a radius of a few miles it’s almost the same as π · r²; for 300 miles, a little less.

The link to Mapsfera

Each widget has a regular link at the bottom to the full Mapsfera tool, with the same circle or points, and the code you copy adds another one below the iframe, on your own page. They’re ordinary links, with no tricks.

The one below the iframe is optional: uncheck “Include the link to Mapsfera” or delete it from the code, and the widget works the same. If you keep it, you help other people find these tools and keep them free. We ask because that’s how Mapsfera keeps going, not because you have to.

Privacy: no cookies, no tracking

The widget sets no cookies, stores nothing in your visitors’ browsers (no local storage, no databases) and has no analytics, ads or social buttons. It doesn’t use place search or ask for the visitor’s location either.

What does happen, as with anything embedded: the visitor’s browser downloads the widget page from Mapsfera and, for the radius and distance maps, the base map from OpenFreeMap. Both get the visitor’s IP address, like any website they visit. The blank map doesn’t connect to anyone else.

The code includes referrerpolicy="no-referrer": the browser doesn’t tell Mapsfera which page the widget is loaded from.

Performance: it won’t slow your page down

With loading="lazy", the browser doesn’t download the widget until the visitor gets close to it. Inside, the map engine (MapLibre) only downloads once the widget is in view, and without hillshading, so it asks for fewer tiles.

The widget doesn’t jump around while it loads: the space for the map and the numbers is reserved from the start. And it uses the system font, so there are no fonts to download.

Address parameters

If you’d rather change the widget by hand, this is what can go after the hash (#) in its address, separated by “&”. Anything you leave out takes its default value.

WidgetParameterWhat it does
All theme=light | dark | auto Light theme, dark theme or the visitor’s device setting. Light by default.
All accent=1f7a4c Accent color: six hex digits, without “#”.
Radius lat=39.0997&lng=-94.5786 Center of the circle, in decimal degrees.
Radius r=25&u=mi Radius (up to 500) and units: mi or km.
Radius name=My store Label next to the center (up to 60 characters).
Radius edit=1 Visitors can move the circle and change the radius.
Distance a=40.7128,-74.006&b=34.0522,-118.2437 The two points, “latitude,longitude”.
Distance na=…&nb=…&u=mi Labels for A and B, and units.
Distance edit=0 A and B stay put (by default, visitors can move them).
Blank map labels=none | numbers | names | capitals No labels, numbers, names or capitals.
Blank map explore=0 No name when a region is tapped.
Blank map canarias=0 Spain without the Canary Islands, framed on the mainland and the Balearics.

The language goes in the path: /embed/… in English and /es/embed/… in Spanish. So does the blank map: /embed/blank-map/us-states/.

How to paste it into WordPress, Wix, Squarespace or Shopify

Almost every platform has a block or an element for pasting HTML. The general steps, according to each one’s help pages:

WordPress

In the block editor, add a “Custom HTML” block and paste the code. On WordPress.com, depending on your plan, the editor may strip iframes: if it disappears when you save, check what your plan allows.

WordPress.com support: Custom HTML block

Wix

In the editor, add the element for embedding code (“Embed HTML”, under embed code), click “Enter Code”, paste the code and resize the element.

Wix Help Center: embedding a site or a widget

Squarespace

Add a Code block, choose HTML mode and paste the code. Some plans don’t allow iframes in Code blocks: if it doesn’t show, check your plan.

Squarespace Help Center: Code blocks

Shopify

In the theme editor, add a “Custom Liquid” section and paste the code. On a page, you can also use the “Show HTML” (<>) button in the content editor.

Shopify Help Center: online store pages

They’re the same as for a Google map: our Google Maps embed code generator also shows how to do it with a Google or OpenStreetMap map.

Frequently asked questions

Is it free?

Yes. No sign-up, no key and no payment, and you can use it on a personal site or your business website.

Do I have to keep the link to Mapsfera?

No. The link below the widget is optional: remove it if you prefer and the widget works the same. The footer inside the widget stays: it leads to the full tool and sits next to the map data credits.

Does the widget set cookies or track my visitors?

No. It sets no cookies, stores nothing in the browser and has no analytics or ads. As with anything embedded, the visitor’s browser connects to Mapsfera to load it and, for the radius and distance maps, to OpenFreeMap for the base map; both get the visitor’s IP address.

Do I need a cookie notice because of the widget?

The widget doesn’t store cookies or data in your visitors’ browsers, so it adds nothing your cookie notice has to mention. What your site needs depends on everything else it uses. This is general information, not legal advice.

Does it look right on phones?

Yes, with the “Responsive” size: it fills the width of its space, and we’ve tested it from 300 to 800 px. With a fixed size, it shrinks so it doesn’t overflow. On blank maps, labels show from 560 px wide; on narrower screens, names show when you tap.

Can I change the place or the radius later?

Yes. Come back here and copy the code again, or edit what comes after the hash (#) in the iframe’s address by hand: lat, lng, r, u… The list is under “Address parameters”.

Will it slow down my page?

Hardly. With loading="lazy", the browser doesn’t load the widget until the visitor reaches it, and the radius or distance map doesn’t download until it’s in view. The blank map is a light drawing with no map tiles.

Why is the distance a straight line and not by road?

Driving distance needs a routing server, and the free public ones aren’t meant to serve thousands of websites at once. The widget gives the straight-line distance, the shortest over the Earth; the driving distance is in the full tool, one click away from the widget’s footer.

Can I put several widgets on the same page?

Yes: each one is a separate iframe, with its own place, theme and color.

Can I use the blank maps in class or on a commercial site?

Yes. The US state boundaries come from the Census Bureau (public domain), the world and Europe from Natural Earth (public domain), and Spain from the IGN (CC BY 4.0). The widget’s footer credits the source: don’t remove it.

Related tools

All tools
US county map Explore every US county on an interactive map colored by Census data such as population or income. County map with cities Pick a US county and see it on the map with all its cities and towns, ready to print or download. Printable map worksheets Print blank-map worksheets with questions and an answer key, ready as a PDF for class or home. Map quiz Learn states, countries and capitals by finding them on a blank map. No sign-up, with a class challenge link.

Sources