Leaflet Map

Sample code for Google Maps Platform JavaScript API author(s): Justin Poehnelt

by Frank Liu

HTML

<head>
  <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
  <div id="mapid" style="width: 100%; height: 400px;"></div>

  <script>
  
  (function loadCSS(url, location=document.head) {
   
    const style = document.createElement('link') 
    style.href = 'https://unpkg.com/[email protected]/dist/leaflet.css'
    style.type = 'text/css'
    style.rel = 'stylesheet'
    
    location.appendChild(style);
  })()
    
    const center = [40.730610, -73.935242];
    // Initialize the map
    const map = L.map('mapid').setView(center, 13); // New York coordinates

    // Add a tile layer (the map's background)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Add a marker at the center
    const marker = L.marker(center).addTo(map);
    marker.bindPopup("<b>Your Device</b>").openPopup();
  </script>
</body>

JavaScript

/* (function loadCSS(url, location=document.head) {
    const scriptTag = document.createElement("script");
    var head = document.head;
   
    const style = document.createElement('link') 
    style.href = 'https://unpkg.com/[email protected]/dist/leaflet.css'
    style.type = 'text/css'
    style.rel = 'stylesheet'
    location.append(style);
    
    location.appendChild(style);
  })() */