Mafrend Map Embed Demo

1. Simple iframe Easiest

Copy and paste a single HTML tag. No JavaScript required.

<iframe
  src="https://mafrend.com/map/embed/?lat=46.9480&lng=7.4474&zoom=13&marker=true"
  width="100%" height="400"
  style="border:none;border-radius:8px;"
  loading="lazy" allowfullscreen allow="geolocation"
  title="Mafrend Map">
</iframe>Copy

2. Auto-init with data attributes Declarative

Add a div with data attributes and include the widget script. The map initializes automatically.

<div data-mafrend-map
     data-lat="48.8566"
     data-lng="2.3522"
     data-zoom="12"
     data-marker="true"
     data-marker-color="#e63946"
     data-height="400px">
</div>

<script src="https://mafrend.com/map/embed/mafrend-map.js"></script>Copy

3. JavaScript API Full Control

Create the map programmatically and control it with the MafrendMap API.

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

<script src="https://mafrend.com/map/embed/mafrend-map.js"></script>
<script>
  var map = MafrendMap.create({
    container: '#my-map',
    lat: 51.5074,
    lng: -0.1278,
    zoom: 10,
    height: '400px',
    marker: true
  });

  // Control the map
  map.flyTo(48.8566, 2.3522, 12);
  map.addMarker(48.8566, 2.3522, '#e63946');

  // Listen to events
  map.on('mafrend:moveend', function (data) {
    console.log('Map moved to', data.lat, data.lng);
  });

  map.on('mafrend:click', function (data) {
    console.log('Clicked at', data.lat, data.lng);
  });
</script>Copy

URL Parameters Reference

All parameters for the iframe embed URL.