title: Load a leaflet map from a link
body: <p>I am trying to load a leaflet map from a link. If I click the first link, the map loads, then if I click the second link, the map does not load. Both links call the same function. I cannot understand what is happening.
  Thanks in advance!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Simple Leaflet Map&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="#" onclick="showMap('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')"&gt;OpenStreetMap&lt;/a&gt;&lt;br&gt;
      &lt;a href="#" onclick="showMap('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')"&gt;Thunderforest&lt;/a&gt;&lt;hr&gt;
      &lt;div id="map" style="width: 600px; height: 400px"&gt;&lt;/div&gt;
  
      &lt;script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"&gt; &lt;/script&gt;
      &lt;script&gt;
          function showMap(url){
              var map = L.map('map').setView([-33.4387,-70.647], 14);
              var mapLink = '&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;';           
  
              L.tileLayer(url, {
              attribution: 'Map data &amp;copy; ' + mapLink,
              maxZoom: 18,
              }).addTo(map);
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>