Dynamically Loading Google Maps api's

Question

Im trying to load the google maps api\'s dynamically. I\'m using the following code:

var head= document.getElementsByTagName(\'head\')[0];
var script= docume         


        

Answer 1

This works for me:

    const myApiKey = `12345`;
    const lat = -34.397;
    const lng = 150.644;
    const zoom = 8;

    const parentElement = document.getElementById(`map`); // a 

    const script = document.createElement(`script`);
    script.src = `https://maps.googleapis.com/maps/api/js?key=${myApiKey}`;
    script.async = true;
    script.defer = true;
    script.onload = function () {
        new google.maps.Map(parentElement, {
            center: {lat, lng},
            zoom
        });
    };
    parentElement.insertBefore(script, null);