How to hide an API-KEY for Google Maps


Bootstrap Studio's map element works fine. This is the orignal code (key is invalid):

<iframe allowfullscreen frameborder="0" width="100%" height="450" src=";q=Paris%2C+France&amp;zoom=15"></iframe>

The problem is that everybody can see that API-KEY and use it. One way to prevent hackers from doing that is letting the key be visible and let Google restrict access from a certain domain only.

But I wonder if there is another way. For instance using a constant thus making the key value invisible. Unfortunately something like

   const API_KEY="AIzaSyDgH....";
<iframe .... ?key=<script>API_KEY</script>& ...'></iframe> 

does not work. Does anybody have a solution?


Have you tried this ?

@sup3xtian Tried it but it did not solve the problem the way I had in mind. Obviously it is not possible. I will look for another solution. Thanks for your comment. Henry