Angular google maps uploaded KML Layer is not showing up on google map:

Question

I am facing an issue with KML upload into the AGM (Angular Google Maps API). I have added KML layer to AGM-Map with global URL of KML file. Application is giving no errors but KML is not showing on google maps.

I am using Angular 5.2.9 and "@agm/core": "^1.0.0-beta.3"

Bellow is the code snippet.

<agm-map [latitude]="-24" [longitude]="135" [zoom]="5" (mapClick)="placeMarker($event)"  >                      
  <agm-marker [latitude]="r.Latitude" [longitude]="r.Longitude" *ngFor="let r of embargoViewModelListEnable; " [iconUrl]="location.icon"> 
  <agm-info-window>Latitude : {{r.Latitude}}, Longitude : {{r.Longitude}} PostCode :{{r.PostCode}}</agm-info-window></agm-marker>
  <agm-marker [latitude]="p.Latitude" [longitude]="p.Longitude" *ngFor="let p of embargoViewModelListDisable; "  [iconUrl]="location1.icon">
  <agm-info-window>Latitude : {{p.Latitude}}, Longitude : {{p.Longitude}} PostCode :{{p.PostCode}}</agm-info-window></agm-marker> 
  <agm-kml-layer [url]="'https://www.dropbox.com/s/3bndf59gz24aokg/PO_0800.kml?dl=0'"> </agm-kml-layer>                   
 </agm-map>

Answer 1

Your KML file does not appear to be publicly downloadable from the link provided (https://www.dropbox.com/s/3bndf59gz24aokg/PO_0800.kml?dl=0). If you open that URL in an incognito window, you'll see a Dropbox error message, which is probably what Maps API is seeing instead of getting the KML file. Make sure your KML is hosted at a URL that is publicly accessible for direct download.

Looks like Dropbox will provide the direct download you need by changing the dl= parameter to be "1", like this: https://www.dropbox.com/s/3bndf59gz24aokg/PO_0800.kml?dl=1