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.
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
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!
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 ?
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.
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
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)?
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:
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.
No, I’m not using a throwaway account, or using an API key.
It says for developmental purposes only, as it should be
So it should be good, I don’t see why not?
Yeah, it should be absolutely fine ! 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.
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.
! But if you are concerned, then that’s how you secure things.