playground.html

<html>
<head>
   <title>Leaflet KML Example</title>
   
   <link rel="stylesheet" href="leaflet/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
   <!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
   
   <script src="leaflet/leaflet.js"></script>
   
   <!-- Bring in the leaflet KML plugin -->
   <script src="leaflet-plugins/layer/vector/KML.js"></script>  
   	
   <script language="javascript">
      function init() {
         var map = new L.Map('map');                       
        
      	 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
                                                             
         var kmlLayer = new L.KML("mapperz-kml-example.kml", {async: true});
                                                              
         kmlLayer.on("loaded", function(e) { 
            map.fitBounds(e.target.getBounds());
         });
                                                
         map.addLayer(kmlLayer);
         
      }
   </script>
</head>
<body onLoad="javascript:init();">
   <div id="map" style="height: 200px"></div>
   
</body>            
</html>
    