DEV Community

4 gotchas when setting up Google Maps API with Next.js and ESLint

Masa Kudamatsu on February 12, 2021

I've set up Google Maps JavaScript API for my Next.js app. The API documentation on how to get started (Google 2021) is very well-written, but I e...
Collapse
 
rcabre95 profile image
Raphael Cabrera

Hey Masa,

This is a great article. There's not nearly enough Nextjs content out there as there should be. I guess that's because the technology is so new.
I'm pretty new to this myself, and I was wondering if you might be able to post your github repo to a google maps/nextjs project, so that I can get some context for these code snippets. Is that possible? Thanks in advance either way!

Collapse
 
asross311 profile image
Andrew Ross • Edited

I am a bit confused by this particular snippet (referencing _document.js I'm assuming)

<html>
<body>
<div id="__next">
<div id="map"></div>
</div>
</body>
</html>

What about the <Main /> and <NextScript /> next/document components wrapped within <body></body>?

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
masakudamatsu profile image
Masa Kudamatsu

Thank you, Andrew, for liking my article (and following me!).

I wasn't articulate enough about this snippet. It's the HTML code generated by Next.js, not the JS code to be compiled by Next.js. I've revised the sentence that introduces this snippet in the article.

Hope it's now clear to you.