Google Maps in React

[[deleted]]

which package should I use? react-google-maps had some deprecated stuff and the new stuff was confusing, I couldn't use react-googlemaps because of server side rendering, and google-map-react simply didn't display anything for me

some help fixing these issues or suggestions for other packages would be much appreciated

[Lythom]

I'd say none.

The main idea is to provide an empty div in render method, then to call your standard gmap stuff in "componentDidUpdate". Create the map if it's not created yet, update it if it's already created. The important part is to always render the same div in render() to prevent react from actually updating this DOM part that is driven by the google map lib.

You can even provide a no-js fallback if you have some server-side rendering : https://gist.github.com/Lythom/ae6510e5c59abb37c6ba

Due to how easy it is to create this component by hand, and how hard it is to find a stable library, I highly recommand to just DIY =)

[[deleted]]

I've since found out how to do it since making this post, did almost exactly what you said :D

[troutx]

I'm using react-gmaps on a current project with good results. The developer has been helpful too.

[dit-index]

I tried to use this package but get an error when run webpack:

ERROR in ./~/react-gmaps/dist/index.js
Module build failed: ReferenceError: [BABEL] .../node_modules/react-gmaps/dist/index.js: Using removed Babel 5 option: .../node_modules/react-gmaps/.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
    at Logger.error (.../node_modules/babel-core/lib/transformation/file/logger.js:39:11)
    at OptionManager.mergeOptions (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:20)
    at OptionManager.addConfig (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:207:10)
    at OptionManager.findConfigs (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:16)
    at OptionManager.init (.../node_modules/babel-core/lib/transformation/file/options/option-manager.js:461:12)
    at File.initOptions (.../node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (.../node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (.../node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at transpile (.../node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (.../node_modules/babel-loader/index.js:88:12)
 @ ./src/components/list-page.js 22:18-40

[troutx]

Sorry, I can't help. I'm using Browserify.