title: Showing different maps in different pages of a website
body: <p>So, i'm new on leaflet.js and i'm trying to present two different leaflet maps on two different pages of my website, i.e, map 1 on page A and map2 on page B.</p>
  <p>If i present both map1 and map2 in the same page works well, but when i try to present each one on one page, the second doesn't appear.</p>
  <p>Some one can help me with this?
  Thank you</p>
  <p>Code for my second page of the website</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;!-- displays site properly based on user's device --&gt;
  
    &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;./images/favicon-32x32.png&quot;&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot;&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;app/scss/style.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot;
     integrity=&quot;sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==&quot;
     crossorigin=&quot;&quot;/&gt;
     &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;
     integrity=&quot;sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==&quot;
     crossorigin=&quot;&quot;&gt;&lt;/script&gt;
    
    &lt;title&gt;Circuit A - Predefined Circuits&lt;/title&gt;
  
    &lt;style&gt;
      .attribution { font-size: 11px; text-align: center; }
      .attribution a { color: #ffffff; }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
     
  
    &lt;header class=&quot;header&quot;&gt;
      &lt;div class=&quot;overlay has-fade&quot;&gt;&lt;/div&gt;
      
      &lt;nav class=&quot;container flex flex-jc-sb flex-ai-c&quot;&gt;
        &lt;a href=&quot;index.html&quot; class=&quot;header__logo hide-for-mobile&quot;&gt;
          &lt;img src=&quot;images/logo_desktop.png&quot; alt=&quot;POCITYF&quot;/&gt; 
        &lt;/a&gt;
  
        &lt;a href=&quot;index.html&quot; class=&quot;header__logo hide-for-desktop&quot;&gt;
          &lt;img src=&quot;images/logo_mobile.png&quot; alt=&quot;POCITYF&quot;/&gt; 
        &lt;/a&gt;
  
        &lt;a id=&quot;btnHamburger&quot; href=&quot;#&quot; class=&quot;header__toggle hide-for-desktop&quot;&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
        &lt;/a&gt;
  
        &lt;div class=&quot;header__links hide-for-mobile&quot;&gt;
          &lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;a href=&quot;network.html&quot;&gt;Network&lt;/a&gt;&lt;a href=&quot;predefined_circuit.html&quot;&gt;&lt;b&gt;Predefined Circuit&lt;/b&gt;&lt;/a&gt;&lt;a href=&quot;create_circuit.html&quot;&gt;Create Circuit&lt;/a&gt;&lt;a target=&quot;blank&quot; href=&quot;https://www.evoraticket.pt/OBilhete.aspx&quot;&gt;Tickets&lt;/a&gt;&lt;a target=&quot;blank&quot; href=&quot;https://pocityf.eu/&quot;&gt;About&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;!-- &lt;a href=&quot;#&quot; class=&quot;button header__cta hide-for-mobile&quot;&gt;Request Invite&lt;/a&gt; --&gt;
      &lt;/nav&gt;
  
      &lt;div class=&quot;header__menu has-fade&quot;&gt;
        &lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
        &lt;a href=&quot;network.html&quot;&gt;Network&lt;/a&gt;
        &lt;a href=&quot;predefined_circuit.html&quot;&gt;&lt;b&gt;Predefined Circuit&lt;/b&gt;&lt;/a&gt;
        &lt;a href=&quot;create_circuit.html&quot;&gt;Create Circuit&lt;/a&gt;
        &lt;a target=&quot;blank&quot; href=&quot;https://www.evoraticket.pt/OBilhete.aspx&quot;&gt;Tickets&lt;/a&gt;
        &lt;a target=&quot;blank&quot; href=&quot;https://pocityf.eu/&quot;&gt;About&lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/header&gt;
  &lt;!-- Editar para baixo --&gt;
  
  &lt;section class=&quot;bar container--images&quot;&gt;&lt;/section&gt;
  &lt;section class=&quot;info_circuits&quot;&gt;
  
      
  ...
  
        &lt;section class=&quot;info_circuits__map&quot;&gt;
              &lt;section class=&quot;maps&quot;&gt;
   
              &lt;div id=&quot;mapcircuit&quot;&gt;&lt;/div&gt;
             &lt;/section&gt;
            &lt;/section&gt;
        
  &lt;/section&gt;  
   ...
  
  &lt;!--&lt;div class=&quot;attribution&quot;&gt;
      Coded by &lt;a href=&quot;#&quot;&gt;UNINOVA&lt;/a&gt;
    &lt;/div&gt; --&gt;
    
    &lt;script src=&quot;app/js/script.js&quot;&gt;&lt;/script&gt;
    
    &lt;script src=&quot;app/js/map_circuita.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Code of maps.js</p>
  <pre><code>// create a map in the &quot;map&quot; div, set the view to a given place and zoom
  var map = L.map('mapid').setView([38.57156160678178, -7.908692129122894], 16);
  
  // add an OpenStreetMap tile layer
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
  }).addTo(map);
  
  // add a marker in the given location, attach some popup content to it and open the popup
  var greenIcon = L.icon({
      iconUrl: 'images/position.png',
  
      iconSize:[60, 40], // size of the icon
      iconAnchor:   [30, 40], // point of the icon which will correspond to marker's location
  });
  L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)
  
      .bindPopup('Casa')
  
      
  // create a map in the &quot;map&quot; div, set the view to a given place and zoom
  var map = L.map('mapcircuit').setView([38.57156160678178, -7.908692129122894], 16);
  
  // add an OpenStreetMap tile layer
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
  }).addTo(map);
  
  // add a marker in the given location, attach some popup content to it and open the popup
  var greenIcon = L.icon({
      iconUrl: 'images/position.png',
  
      iconSize:[60, 40], // size of the icon
      iconAnchor:   [30, 40], // point of the icon which will correspond to marker's location
  });
  L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)
  
      .bindPopup('Casa')
  
  </code></pre>