Google Map Support

[simongroom]

Hi, very very new to fresh, and server side rendering in general. I have searched a fair bit but don't see much on how I might incorporate a google map (or really any map) in a denoland/fresh application.

I have tried to use google-map-react by running deno task esm:add react react-dom google-map-react.
I have successfully used this library using react a number times.
But when I load it in my application I am getting this error, which kind of makes sense, I suppose, given SSR and all that.

I have put the map component in the islands/ folder.

Does anyone have any ideas or suggestions to get this working?

Thanks

[CAYdenberg]

I wouldn't even try serverside rendering. If you have a "default" map just take a screenshot of that and send the image as the "no javascript" version of things.

On the needed route, load the google map javascript with a regular ol' script tag. Then in your island, in a useEffect hook instantiate the actual map according to the google maps docs. Don't use react if you don't need to, and don't use google-map-react as it's probably just it's probably just adding a lot of unnecessary complexity.

[simongroom]

Thanks @CAYdenberg i couldn't get the useEffect way working so will try this. The map would load successfully on first load but upon a refresh or navigation away and back it wouldn't load.

Could be something to do with the way the app is set up currently. I've taken the merch example from the Deno fresh website and added some simple navigation, and am trying to render the map on a separate page route..

Was gonna try and get a barebones reproducible example up if you think you might be able to assist?

Thanks again for your time and helping me out here

[CAYdenberg]

Reproducible example would make it much easier. Could even be a possible "recipe" for the Fresh docs in future.

[simongroom]

@CAYdenberg Here you go.. strangely also seems that the map wont load when you have the developer console open.

https://github.com/simongroom/google-map-fresh-example

[simongroom]

@CAYdenberg I solved the problem - I updated the linked repository with the functioning code.
Thanks for your assistance, it definitely got me heading in the right direction. My big issue was loading the google maps api asynchronously.. as well as trying to init the map in javascript rather than inside the tsx component in the islands folder.

[CAYdenberg]

Cool, glad it worked out.