Could not call other Google Map service

[twuttiwat]

Hi there,

I am trying to incorporate Fable.ReactGoogleMaps into my Safe Simplifed stack (Felize). I could show the map and add markers. But I could not do the following

1. Call GeoCode service
2. Call distance matrix service
3. Call direction renderer

I think the problem is from Google Map js script is dynamically loaded which cause Fable compilation error. I fix that by follow original readme from Fable.Import google map which is:

    externals: {
        'google.maps': 'window.google.maps'
    },

Now the error is gone and I could sometime call other Google API service. But most of the time it show error that

can't access property "maps", window.google is undefined

I guess that my code trying to invoke actual google map library but the library is not loaded. Are there any ways to wait until the Google Map js library finished loading before I call service api. I did try to call function in OnIdle as follow:

let route() =
    printfn "route GetBounds %A" (mapRef.GetBounds())
    //()
    
    if (mapRef.GetBounds().IsSome) then
        let directionService = GoogleMaps.maps.DirectionsService.Create()
        let directionRenderer = GoogleMaps.maps.DirectionsRenderer.Create()
        let map:GoogleMaps.Map option = Some (GoogleMaps.maps :?> GoogleMaps.Map)
        directionRenderer.setMap(map)
        
        let origin = GoogleMaps.maps.LatLng.Create(10.11111, 10.22222)
        let destination = GoogleMaps.maps.LatLng.Create(11.11111, 11.22222)
     
         
        let req:GoogleMaps.DirectionsRequest =
            { new GoogleMaps.DirectionsRequest with
                 member x.avoidFerries with get() = None and set v = () 
                 member x.avoidHighways with get() = None and set v = () 
                 member x.avoidTolls with get() = None and set v = () 
                 member x.destination with get() = Some !^destination and set v = ()
                 member x.durationInTraffic with get() = None and set v = () 
                 member x.drivingOptions with get() = None and set v = () 
                 member x.optimizeWaypoints with get() = None and set v = () 
                 member x.origin with get() = Some !^original and set v = () 
                 member x.provideRouteAlternatives with get() = None and set v = () 
                 member x.region with get() = None and set v = ()
                 member x.transitOptions with get() = None and set v = () 
                 member x.travelMode with get() = Some ("DRIVING" :> obj) and set v = () 
                 member x.unitSystem with get() = None and set v = () 
                 member x.waypoints with get() = None and set v = () }
        
        directionService.route(req, fun resp status -> printfn "route %A" resp.routes.Count; 
                                                        directionRenderer.setDirections(resp))
    else
        printfn "no bounds"
        ()   

let onIdle() =
    if mapRef.GetBounds().IsSome then
        route ()
    else
        printfn "no bounds

let map' center markers =
    let googleMapApiKey = Config.variable "GOOGLE_MAP_API_KEY" 
    googleMap [
        MapProperties.ApiKey googleMapApiKey
        MapProperties.MapLoadingContainer "maploadercontainer"
        MapProperties.MapContainer "mapcontainer"
        MapProperties.DefaultZoom 12 
        MapProperties.DefaultCenter !^ center 
        MapProperties.Center !^ center 
        MapProperties.Markers markers
        MapProperties.OnMapMounted onMapMounted
        MapProperties.OnIdle onIdle
    ]

The direction count return correctly. The problem is that error happens sometimes to time. if I comment and uncomment the code several times, it will run.
Any help will be really appreciated. I am sorry to post questions here. (not sure that it is an issue or not) But I try to post this question in f# slack but still got no complete answer yet. So I decide to ask here where the library created.

Thank you very much,
TW

[nojaf]

Hey, this message won't be of much helps but I eventually moved to mapbox instead of google maps exactly for this problem.
The whole dynamic loading of googleMaps really bit me on numerous occasions.
Sometimes just restarting webpack seems to solve things.

Perhaps you can add some extra checks to verify that googleMaps exists.
Something like

open Fable.Core.JsInterop

let isLoading () : bool = emitJsExpr () "window.google && window.google.maps"