use @googlemaps/js-api-loader

[jpoehnelt]

• this will provide all options for loading the api(version, mapId, etc)
• handle cases where other components might also load api
• is maintained by Google Maps Platform Devrel team

[ErrorPro]

@jpoehnelt Hey, I was thinking about using that tool. Will take a look at that asap!

[ErrorPro]

@jpoehnelt I just tried to implement @googlemaps/js-api-loader and it doesn't work if there are multiple components trying to require google map API. So I ended up having an issue using two libraries together, the other one is @react-google-maps/api. The issue is that the @googlemaps/js-api-loader lib doesn't return always promise, if for example another lib required google maps API and it loaded the js file before RGAutocomplete did.

As you can see the google object is returned right away because it was loaded by google map lib before but it missing the places key because it's currently downloading that. So by the time I inspected it in chrome it had already been downloaded and available.

So as I said, it's hardly gonna change anything for the better but It gave me another idea to just download js places API if it's not available. So if another lib required google.maps API but without places we will ask it with another HTTP request.

[jpoehnelt]

@googlemaps/js-api-loader lib doesn't return always promise

do you have any code demonstrating this?

missing the places key because it's currently downloading that

this would match waiting for the initial script to load and not the callback to be fired. @googlemaps/js-api-loader uses the latter pattern which should have all resource available when it resolves the promise. I guess there could be a state where another library is trying to load the google maps api and it has not quite finished, but @googlemaps/js-api-loader short circuits because google.maps is already defined(not checking other libraries).

[ErrorPro]

This is the code I ended up with, I left the comments there for now. You can just use that branch in your package.json and try to use two libraries together. Let me know if anything else is needed or any results are known. Thanks

[meidikawardana]

Hi, today I was struggling to load this library after I loaded google maps API for @react-google-maps/api using js-api-loader. At the end, the solution was to remove the js-api-loader and load the google maps API using a wrapper from this official library by Google team: @googlemaps/react-wrapper . Reference: https://cloud.google.com/blog/products/maps-platform/loading-google-maps-platform-javascript-modern-web-applications

[ErrorPro]

@meidikawardana Hey! Seems like this is what we need, I'll try to incorporate this library into autocomplete logic ASAP

[ErrorPro]

Well, I took a closer look and it turned out that I've already given some time to it https://github.com/ErrorPro/react-google-autocomplete/issues/115#issuecomment-861775702 Unfortunately there are edge cases where the @googlemaps/js-api-loader doesn't help. I will take another look and might build a reproducible example of the case described in the mentioned comment.

[AlexeyRDKV]

This issue was closed because it has been inactive for long time.