Add a map with your location to your website

A map on the contact page shows customers where to find you. This one has a marker with your address and opening hours, and a link that opens directions on the phone of the visitor. It is one block of HTML for any website, and it needs no Google account.

Three steps

1. Create a free account and, in the dashboard, create a key of the type “Maps only”. Enter your website as allowed referer, for example example.com, so that no other website can use the key.
2. Copy the code below and put your key where it says YOUR_KEY.
3. Change name, address, opening hours and position in shop, and paste the code into your page where the map should appear.

If you do not edit HTML, the map maker writes a code for WordPress, Wix, Squarespace and other website builders: find your address, choose a look, copy.

<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.css">
<style>
  #map { height: 420px; border-radius: 8px; }
</style>

<div id="map"></div>

<script type="module">
import * as maplibregl from "https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.mjs";

// Your business. The position is longitude, latitude: right-click the place
// on openstreetmap.org and choose "Show address" to read it.
const shop = {
  name: "Muster Bakery",
  address: "Rennweg 10, 8001 Zürich",
  hours: "Mon–Fri 7:00–18:30, Sat 8:00–16:00",
  lon: 8.5394,
  lat: 47.3727
};

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/light.json?lang=en",
  center: [shop.lon, shop.lat],
  zoom: 16,
  cooperativeGestures: true // the page scrolls past the map; Ctrl + wheel or two fingers move it
});
map.addControl(new maplibregl.NavigationControl({ showCompass: false }));

const directions = `https://www.google.com/maps/dir/?api=1&destination=${shop.lat},${shop.lon}`;
new maplibregl.Marker({ color: "#c0392b" })
  .setLngLat([shop.lon, shop.lat])
  // focusAfterOpen: false, so that the page does not jump to the map when it loads
  .setPopup(new maplibregl.Popup({ offset: 30, closeButton: false, focusAfterOpen: false }).setHTML(
    `<strong>${shop.name}</strong><br>${shop.address}<br>${shop.hours}<br>
     <a href="${directions}" target="_blank" rel="noopener">Directions</a>`))
  .addTo(map)
  .togglePopup();
</script>

The position of your business

The map needs the latitude and longitude of your entrance. On openstreetmap.org, zoom in on it, right-click it and choose “Centre map here”. The address in the browser then ends with #map=19/47.37270/8.53940: the zoom, the latitude (lat in the code) and the longitude (lon).

In WordPress and website builders

In WordPress, add a Custom HTML block to the page and paste the code. WordPress keeps the script only for users who may post unfiltered HTML; on a normal installation, these are administrators and editors.

Wix, Squarespace, Webflow and most other website builders have an element for embedded or custom code: paste the code there. If the builder puts the code in a frame of its own, give the frame a height of about 450 pixels. Some plans of these builders do not allow scripts.

In a page you write by hand, the <link> line can also go into <head>.

Directions

The link opens Google Maps with your business as destination, on a phone in the Google Maps app. It needs no key. For Apple Maps, use https://maps.apple.com/?daddr=47.3727,8.5394, for OpenStreetMap https://www.openstreetmap.org/directions?to=47.3727,8.5394.

What it costs

The map loads its data as map tiles, and each tile counts against the allowance of your account. A visitor who only looks at the map loads 1 tile: at zoom 16, one tile covers the whole map. A visitor who zooms out three steps and moves the map four times loads 8 to 14. A browser keeps the tiles for a day and then checks them again without cost, so a returning visitor costs almost nothing until the weekly map update. We measured this with MapLibre GL JS 6.13.0 in windows of 1280 × 720 and 390 × 700 pixels.

Prices plus VAT. All plans: maps plans.

Cookies and privacy

The map sets no cookies: neither MapLibre nor our map server uses any. The browser of the visitor asks our servers in the EU for the map tiles and sends its IP address with it, as with any image from another server. The code loads MapLibre from unpkg.com. To load nothing from other servers except the tiles, copy the dist folder of the npm package maplibre-gl to your server and change the two addresses.

Good to know

• The map shows OpenStreetMap data and is updated every week. If your street or shop is missing or wrong, anyone can correct it on openstreetmap.org, and the map shows it within one or two weeks.
• The © OpenStreetMap credit must stay on the map. The (i) button in the corner opens it.
• For labels in another language, change lang=en to de, fr, it or one of 41 languages. For another look, change light to one of the nine styles.
• More than one location: see the store locator.