KML Layer won't display

[Grumpier]

Discussed in https://github.com/JustFly1984/react-google-maps-api/discussions/3163

^{Originally posted by Grumpier December 14, 2022} I've just started experimenting with react-google-maps-api and I cannot get a kml track to display in a map. The url I am using works fine if I plug it into the KML Layer example on netify. I can get circles to display in the map without a problem. Here's my component:

Here's my screen with a log of the KmlLayer object:

You can see that the component is mounted with a status of "ok".

Does anyone have an idea of what might be my problem?

Thanks!

[gkrinc]

Is you kmlUrl value accessible to the public? If that URL points to anything behind a firewall or authentication layer it will not load. I've run into this issue myself.

[Grumpier]

Thanks gkrinc. I don't think that's the issue since you can see that when I log the call the status is "OK" and metadata is being returned. Also, when I use that url in the style guide example, it appears fine.

[florianchevallier]

On my side, what I finally did was something like this :

import { GoogleMap, LoadScriptNext } from '@react-google-maps/api';
import React, { useRef } from 'react';
import Spinner from '../Spinner';

interface MapProps {
  width?: number;
  height?: number;
  center?: google.maps.LatLng | google.maps.LatLngLiteral;
  zoom?: number;
  apiKey: string;
  kmlUrl?: string;
}

const center = {
  lat: 48.5,
  lng: 2.2,
};

function Map({ width = 800, height = 600, zoom = 10, apiKey, kmlUrl }: MapProps) {
  function onMapLoad(map: google.maps.Map) {
    if (kmlUrl) {
      new google.maps.KmlLayer({
        url: kmlUrl,
        preserveViewport: true,
        suppressInfoWindows: true,
        map,
      });
    }
  }

  return (
    <LoadScriptNext googleMapsApiKey={apiKey} loadingElement={<Spinner />}>
      <GoogleMap
        id="kml-layer-example"
        mapContainerStyle={{
          height: `${height}px`,
          width: `${width}px`,
        }}
        zoom={zoom}
        center={center}
        onLoad={onMapLoad}
      />
    </LoadScriptNext>
  );
}

export default React.memo(Map);