Google Maps API works locally - doesn't work on Glitch

Hi!
I’ve got a simple web app that displays a Google Map. In my local development environment, everything works great. When I try the same code on Glitch, I’m getting a grey blank map instead.
Any ideas?
Note: My API key is not restricted to a specific domain or such, as far as I know.
Note: one answer on Stack Overflow mentioned the possibility of blocked ports as potential cause for these kinds of issues. Can this be relevant here?
Thanks,
Ran

Hi @Ranlevi,

Can you share the name of your project so we can take a closer look?

Sure - here’s the link:

I’ve removed the API key so the project won’t run now anyway, but you can see what i’m trying to do.
Thanks!
Ran

Thanks for that @Ranlevi

One thing we noticed is that you weren’t using a .env file to save API keys in. We encourage users to do this with any credentials needed for their project. You can learn about how Glitch projects can use .env files here.

Once you review this information, and try using a .env file for the API key, let me know if you still can’t get Google Maps to show.

You may also want to check out our Google Maps starter kit.

3 Likes

Hi @Ranlevi! I did some exploring and one thing I noticed is you aren’t setting the height of the div with id=‘map’ explicitly - a difference between your project and the Google Maps starter kit.

If you add some CSS to set the height of that element, your map will appear.

Try:

#map {
 height: 100%;
} 

in style.css.

There’s a small note about needing to do this in the Google Maps API tutorial. It’s this snippet in the Hello World example:

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
2 Likes