How to display leaflet map in f7?

Dear friends,
I’m using Framework7 5.5.1v and Leaflet 1.9.3 (,

I couldn’t show the map correctly.

I have to use the map in two different pages.
On the first page, I have to view it in full screen, however the map goes beyond the screen, I can’t see the right side and the bottom side.

The second page, is divided into two columns, and I have to show the map in the second column. Again, I can not set the size.

Thank you in advance.

Jsfiddle: Framework7 Starter - JSFiddle - Code Playground

#map { 

    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
<div class="page-content">
    <div class="row">
        <div class=" col-100 medium-100 large-50">
           <div class="col">
		      <div id="map"></div>
       <div class=" col-100 medium-100 large-50">
            <div class=" col-100 medium-100 large-50">
           <div class=" col-100 medium-100 large-50">

You can use this code

const initializeMap = () => {
  if (mapInitialized) {
  mapInitialized = true;

  window.LRM = {
    tileLayerUrl: 'https://{s}{z}/{x}/{y}.png',
    osmServiceUrl: '',
    apiToken: 'YOUR_TOKEN'

  // create the map
  var map ='map');

  // add OpenStreetMap tiles to the map
  L.tileLayer(LRM.tileLayerUrl, {
    detectRetina: true,
    attributionControl: false

  // Get the current user position
  navigator.geolocation.getCurrentPosition(function(position) {
    const userLat = position.coords.latitude;
    const userLng = position.coords.longitude;

    // Set the starting waypoint as the user's position
    var waypoints = [
      L.latLng(userLat, userLng),
      L.latLng(AnotherLat, AnotherLang)

    // Update the waypoints with the current position
    const updateWaypoints = position => {
      waypoints[0] = L.latLng(position.coords.latitude, position.coords.longitude);
      map.setView(waypoints[0], 19);

    // Start watching the position
    watchId = navigator.geolocation.watchPosition(updateWaypoints, null, {
      enableHighAccuracy: true,
      locationProvider: 'gps,network,fused'

    // Create the routing control with the updated waypoints
    var control = L.Routing.control({
      router: L.routing.osrmv1({
        serviceUrl: LRM.osmServiceUrl
      plan: L.Routing.plan(waypoints, {
        createMarker: function (i, wp) {
          return L.marker(wp.latLng, {
            draggable: false,
            icon: i === 0 ? L.icon({
              iconUrl: '',
              iconSize: [25, 41],
              iconAnchor: [12, 41],
              popupAnchor: [1, -34],
            }) : L.icon({
              iconUrl: '',
              iconSize: [25, 41],
              iconAnchor: [12, 41],
              popupAnchor: [1, -34],
        routeWhileDragging: false

      fitSelectedRoutes: true,
      showAlternatives: false

    // Hide the routing control panel
  }, function(error) {
  }, {
    enableHighAccuracy: true
    // timeout: 5000,
    // maximumAge: 0

    $f7.on('pageBeforeIn', function (e, page) {

Thank you for your support. However my problem is displaying the map responsively.
I can’t view full screen or set a height and width. There seems to be some css rules against f7’s css

Connect the phone to the computer and debug with chrome inspect.

Here the jsfiddle: Framework7 Starter - JSFiddle - Code Playground