title: How to retrive datas from mysql database and show those data on leaflet map?
body: <p>Getting error like-</p>
  <p>Unchecked runtime.lastError: The message port closed before a response was received.</p>
  <pre><code> 
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot; /&gt;
  &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css&quot; /&gt;
  &lt;script src=&quot;https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  </code></pre>
  <p>And here I intended to loop through the JSON objects and, for each,  add a marker to a marker cluster group named city.</p>
  <pre><code>  
  
  &lt;script type=&quot;text/javascript&quot;&gt; 
   var map = L.map('map').setView([22.5726, 88.3639], 4);
   L.tileLayer('https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=dVhthbXQs3EHCi0XzzkL',{
     attribution:
     '&lt;a href=&quot;https://www.maptiler.com/copyright/&quot; target=&quot;_blank&quot;&gt;&amp;copy; MapTiler&lt;/a&gt; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot; target=&quot;_blank&quot;&gt;&amp;copy; OpenStreetMap contributors&lt;/a&gt;'
   }).addTo(map);
   var marker = L.marker([22.5726, 88.3639]).addTo(map);
   var city = L.markerClusterGroup();
    var Points = $.getJSON(&quot;get_location.php&quot;, function(data) {      
   for (var i = 0; i &lt; data.length; i++) {
     var new_location = new L.LatLng(data[i].latitude, data[i].longitude);
     var place = data[i].place;
     var marker = new L.Marker(new_location, {
       title: place
     });
     var message = 'Place name: ' +place;
     marker.bindPopup(message);
     city.addLayer(marker);
  
        if (data[i].latitude &lt; SWlat) {SWlat = data[i].latitude}
        if (data[i].longitude &lt; SWlng) {SWlng = data[i].longitude}
        if (data[i].latitude &gt; NElat) {NElat = data[i].latitude}
        if (data[i].longitude &gt; NElng) {NElng = data[i].longitude}
  
   }
    });
    Points.done(function() {
    locSW = new L.LatLng(SWlat, SWlng);
    locNE = new L.LatLng(NElat, NElng);
    mapBounds = L.latLngBounds(locSW, locNE);
    map.fitBounds(mapBounds);
    });
   map.addLayer(city);
  &lt;/script&gt;
  
  </code></pre>
  <p>Still getting error message in console and the marker points are not showing in map. Can anyone kindly help me in this?</p>