Open Grumpier opened 1 year ago
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.
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.
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);
Discussed in https://github.com/JustFly1984/react-google-maps-api/discussions/3163