OpenStreetMap Widget

Everything OpenStreetMap Widget can do

Create a single-location map or a searchable multi-location directory with business details, category filters, directions links, base map styles, and brand controls. Set it up visually and embed it without writing custom map code.

Create Your Location Map - It's Free!
Everything OpenStreetMap Widget can do Hero Bg Image

How to embed Open Street Map Widget to WordPress

1Get your embed code

After customizing your Jotform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jotform Website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

Map every location with full details

Add offices, stores, venues, service areas, or a single featured place. Give each saved location a name, address, phone number, website, hours, category, description, rating, and optional image so visitors can compare details quickly.

Location fields include:

NameAddressPhoneHoursDescription
Create Your Widget
Map every location with full details

Let visitors search and pick a location

In multi-location mode, a collapsible panel can list every place with key details. Visitors can search the list, filter by category, and select a result to recenter the map on that spot.

Panel controls include:

Search boxLocation listCategory filtersExpanded stateHide/show panel
Customize the Panel
Let visitors search and pick a location

Send visitors straight to directions

Directions links open OpenStreetMap with the selected destination filled in, so visitors do not have to copy an address. You can also choose whether those links open in a new tab or the same tab.

Map actions include:

Directions linkNew tab optionSame tab optionBase map stylesSatellite view
Set Map Actions
Send visitors straight to directions

Style the map to match your brand

Choose split or stacked layout, set map height and zoom, pick a light or dark widget theme, and fine-tune panel, border, text, accent, card, and marker colors. Add scoped custom CSS when you need extra control.

Style controls include:

Light or darkSplit or stackedMap heightAccent colorCustom CSS
Style Your Widget
Style the map to match your brand

Look sharp on every screen

The layout adapts for smaller screens, including stacked presentation on mobile. Separate desktop and mobile visibility controls let you decide where the widget appears.

Responsive controls include:

Desktop visibilityMobile visibilityStacked layoutAdaptive panelResponsive map
Preview Responsiveness
Look sharp on every screen