Is there a way to add a google api map without needing to go through billing etc

Hi all.
I don’t really want to have to add a billing account just to experiment around with google maps.

Adding a google map

If you scroll to the bottom , the ‘Get an API key’ part is what I would like to avoid. Getting the API key is not the problem, but after that .I don’t want to enable billing. I have dealt with multiple fraud events, so don’t want to add to the risk.

I have managed to add a map to my page with iframes , but now I need to add markers , and this doesn’t seem possible with iframes.
So I’m stuck with Google API maps, and billing.

Unless I missed something?
Thanks

You should never put your API keys in a front-end app. All calls to the API should occur via a backend to avoid the public having your API keys.

1 Like

oh then it’s getting very tricky.
I’m just focusing on front end development, and I’m trying to copy the uber.eats page:
https://codepen.io/cynthiab72/pen/OJZYmEy?editors=1111

I’m not sure what to do then, other then embed a map with iframes?
I off course googled how to add markers to an iframe map, but it didn’t seem possible?

The embedded iframe map works, but I would also like to add markers.

I do want to mention it’s been about 1.5 years since I dealt with JS and Jquery :slight_smile:
And I never dealt with back-end development. The final module I did was D3
it might be possible to add a map with D3 , but seems even more complicated?
Thanks!

Not sure how that would help any.

If it is just for the design it really doesn’t need to be a functioning map, does it?

Otherwise, you have to create a backend that at least can “proxy” the interaction with the API that requires an API key.

1 Like

right now that’s what I did as I can’t use an api key on front-end?
And I couldn’t get it too work anyway.
I know that iframes are dated and there’s no way to add markers, so I was wondering what to do ?

it’s just for show yes, I’m hoping there’s a decent solution? :slight_smile:
Even for show I would just like to add markers?

Maybe something like OpenLayers/OpenStreetMap would work. But it depends on which features you need.

1 Like

I’ll take a look at it , hopefully it’s not too complicated.

Edit: I’ve taken a look at the site, and my impression is that this won’t work for a codepen project?
It just seems so overly complicated too?
Thanks

Personally, I think if you are just going for a clone of the design being able to add map markers doesn’t really add anything to the design. That would only be if you were trying to clone the app itself with its functionality.

I know, but it’s part of my portfolio.

This site has a google map tutorial, with no api keys ? I just glanced at it a bit, so could be wrong. Would this work for my purpose ? It says for development purposes only, but that’s what I’m doing

tutorialspoint.com

unless there’s a decent front-end development alternative?
How would this be solved in a team setting (both front-end and back-end devs working on a project)?

Thanks!

I somehow managed to solve it myself :slight_smile:
it works now, not full functionality , but something visual at least and using google.maps vs iframes.

Thanks.

If it’s just for your portfolio

  1. I wouldn’t use CodePen, it’s going to be highly restrictive, just build the clone you’re doing properly, locally, then deploy it. This is harder in many ways, you’ll need to do more legwork, but it will be an actual thing that you’ll use the exact same tools you’d use IRL. Much, much more importantly, it also allows the following:
  2. You can’t use Google maps on the frontend without exposing an API key, it can’t work (well, technically it can with a server-side backend, but the way you do it would remove any UI interactivity). However, Google strongly recommends that you set restrictions on your API key – see here. If you scroll down to “set an application restriction for an API key” it shows the restriction types. This is what you want: you want your API key to just work for the server you are using and your web address. But afaik you can’t really have those things from CodePen: where the code lives has to be on something you control (server, IP address, web address)

Otherwise you can get it working just fine, as you’ve discovered, but it’s not particularly secure. This probably doesn’t matter very much for your usecase, but I would strongly advise using a [throwaway] account on Google that you set up just for this purpose to generate API keys against.

1 Like

No, I’m not using a throwaway account, or using an API key.
It says for developmental purposes only, as it should be :slight_smile:
So it should be good, I don’t see why not?

Yeah, it should be absolutely fine :slightly_smiling_face:! But if you are concerned, then that’s how you secure things.

It’s not necessarily applicable to your usecase (in that this is just a demo) – this is to protect you IRL, toy apps are not really a target [obvs YMMV]. However, if you want something that mirrors real life, that will provide understanding re. how you actually set this stuff up, it’s quite useful. Regardless, I’d still strongly suggest not using CodePen and instead building things as you would IRL: you’ll get a far deeper understanding of the tools required.

oh oke. You mean a proper IDE or such ?

I’ve never coded with google maps before, today the first time, and I don’t plan on developing back-end. So do I need an understanding of google maps for front end work or not ?
I’m trying to add labels on hover now , and I feel it may be overkill if it’s beyond my scope of work.

Thanks :slight_smile:

I’m curious what do you suggest instead of codepen? In relation to how I would build things irl ?
Sorry, many questions :slight_smile: