Menu
I'm faced with a problem with a small web application I'm developping: My HTML-source will be integrated into the HTML source on another site. I'm using a Google Map in my code, so I have to pass a API-Key for loading the Google Maps-script on the current domain.
The problem: My code will be integrated on two different domains, requiring two different API-Keys. I have those two keys and can identify the valid one by JavaScript (With the help of document.location.host), but how can I manage to dynamically load the script with the correct key?
For reference: The key is passed as parameter in the script loading url:
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript">
</script>
447
Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key. Click Close.
When you create a Google Maps API key, it can be locked to only be used on specific domains that you authorize. These domain names are called "referrers", and your API key won't work on other domains.
The Google Maps Platform static web APIs let you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The APIs create an image based on URL parameters sent through a standard HTTP request and allow you to display the result on your web page.
Googlemaps API key is required for built-in theme map element as it offers advanced options for map style, zoom and marker. However, you may use a standard Google Maps block of WPBakery or Elementor page builder to set up Google maps without API key.
Use
var script = document.createElement("script");
script.setAttribute("src",whatever);
document.getElementsByTagName("head")[0].appendChild(script);
Replace whatever with the script source you want to use
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
