Open Street Maps shows an interactive map with a pin for every address you add. Type an address and the element finds its coordinates for you. It uses OpenStreetMap, so there is no Google account or API key to set up.
Each map below is an Open Street Maps element with different settings: a store locator, a delivery area map, a round contact map and a walking route. Drag a map to move it, click a pin to see its address and use the + and - buttons to zoom.
Crumb & Co. Bakery in Manchester. Five addresses, zoom 12, full colour, 16px corners. Click a pin to see the area name.
Green Crate in Bristol. Seven areas, zoom 13, Greyscale filter and Hide Zoom Controls for a quiet map that sits behind the content.
Deliveries every Tuesday and Friday. Order by 8pm the day before.
The Harbour Hotel. One address, zoom 14, Sepia filter, a 50% radius for a round map and a soft shadow.
Fellside Walking Holidays. Four stops, zoom 10 so the whole route fits, full colour with the zoom buttons for a closer look.
No account, no keys, no coordinates to look up.
Drop Open Street Maps onto your page. It starts with a single pin in London.
Add a row for each location and type its address. The element looks up the coordinates and places a pin.
Choose the zoom level, width and height, then add borders or a greyscale or sepia filter.
A simple way to show where you are.
Add as many addresses as you need. Every one gets its own pin on the same map.
Type a place name or street address. Coordinates are found for you through OpenStreetMap's Nominatim service.
Maps use OpenStreetMap tiles and the Leaflet library, so there is nothing to sign up for.
Click a pin to show its address in a small popup.
The map centres itself on the middle of all your pins.
Each address is looked up once and cached for 30 days, which keeps pages fast.
Show the map in full colour, greyscale or sepia to suit your design.
Scroll wheel zoom is turned off, so visitors can scroll past the map without getting stuck.
Remove the + and - buttons for a cleaner look.
Any page that needs to show one place or many.
Show your office or shop with a single pin.
Put every branch on one map so visitors can find the nearest.
Mark the venue, parking and nearby hotels.
Show where a property sits in its area.
Pin the towns or districts you cover.
Plot the stops on a route or itinerary.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Zoom | Starting zoom level of the map. Higher numbers zoom in closer. | 12 |
| Locations | Repeater of addresses. Each row adds a pin. | London |
| Design | ||
| Width | Width of the map. | — |
| Height | Height of the map. | — |
| Borders | Border width, colour and corner radius. | — |
| Filters | None, Greyscale or Sepia. Shown on the front end. | None |
| Hide Zoom Controls | Hide the + and - buttons on the front end. | Off |
| Spacing | ||
| Margin | Space above and below the map. | — |
No. The map uses OpenStreetMap and Leaflet, which do not need a key or an account.
The builder shows a simple preview of the first location. All the pins appear on the front end.
The builder shows a notice listing any address it could not find. Make the address more specific by adding the town, county, country or postcode. For example, "Easton, Bristol, UK" finds the right Easton.
Yes, with the + and - buttons. Scroll wheel zoom is off so the page scrolls normally. You can hide the buttons if you prefer.
On the middle point of all your pins. Set the zoom level so every pin fits, as in the route demo above.
Greyscale and sepia are applied on the front end only, so the builder preview stays in colour.
Open Street Maps is included with Phox Elements, along with 140+ other premium elements for Breakdance.