CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3kml
churruscat
churruscat

Reputation: 81

KML not shown when loaded with javascript API to google maps

I want to load a KML file with the API provided by GoogleMaps, but can't make it work.

I have a KML file that works correctly and displays all the points when loaded manually from my computer to GoogleMaps. However, when I try to do it with the API, it doesn't work. I uploaded my file to Google drive and I am using the example provided by Google (I only change coordinates, file and API key). What am I doing wrong?

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GeoRSS Layers</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 40.45, lng: -3.8}
        });
        var georssLayer = new google.maps.KmlLayer({
          url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
        });
        georssLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>
  </body>
</html>

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 40.45,
      lng: -3.8
    }
  });
  var georssLayer = new google.maps.KmlLayer({
    url: 'https://drive.google.com/open?id=15OVgNwtVbLVARkHJD3F8P_bEfG9oJ4Lu',
  });
  georssLayer.setMap(map);
}
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<title>GeoRSS Layers</title>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Upvotes: 0

Views: 1487

Answers (1)

geocodezip
geocodezip

Reputation: 161324

The link to Google Drive you are using does not provide the raw KML.
If I check the status of the KmlLayer after it loads, I get INVALID_DOCUMENT (fiddle, check the javascript console)

Per the article: Direct linking to your files on Dropbox, Google Drive and OneDrive:

Google Drive direct download links
Grab the file ID from the original link (get the share link from the sharing settings) and append it to the end of the new link. With the new format, any link you share will automatically download to your recipient’s computer. For example:

https://drive.google.com/file/d/FILE_ID/edit?usp=sharing

Becomes:

https://drive.google.com/uc?export=download&id=FILE_ID

In your case:

url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',

becomes:

url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',

proof of concept fiddle

screenshot of resulting map

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 40.45,
      lng: -3.8
    }
  });
  var georssLayer = new google.maps.KmlLayer({
    url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
  });
  google.maps.event.addListener(georssLayer, 'status_changed', function() {
    console.log(georssLayer.getStatus());
  })
  georssLayer.setMap(map);
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Upvotes: 2

Related Questions