CODEWITHSUNDEEP
javascriptpythonhtmlgoogle-earth-enginedynamic-loading
Akhil Jain
Akhil Jain

Reputation: 1

KML Dynamic Loading Using Google Cloud console

I have a KML which is having 40K records,It got stuck whenever I open the GE. To make the operation smooth I wanted to use the dynamic loading using MAPS JavaScript API,

I saved the KML in Public server and wanted to access whenever I open. Can somebody help to write a code that will work

I have tried below code and it is giving me error:

Error: js?key=YOur-API KeY Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance.

Code:

<html>
<head>
  <title>Dynamic KML Loading in Google Maps</title>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 37.422, lng: -122.084 },
        zoom: 12
      });
      // Load the KML file dynamically
      var kmlLayer = new google.maps.KmlLayer({
        url: 'https://your-kml-file-link.kml', // Replace this with your hosted KML URL
        map: map
      });
      // Function to update the KML file dynamically
      function updateKml(newUrl) {
        kmlLayer.setUrl(newUrl);
      }
      // Example: Automatically load a new KML after 10 seconds
      setTimeout(function() {
        updateKml('https://another-kml-file-link.kml'); // Replace with another KML URL
      }, 10000); // 10 seconds delay
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map" style="width: 100%; height: 500px;"></div>
</body>
<html>

Upvotes: 0

Views: 37

Answers (0)

Related Questions