Chargement dynamique de Google Maps API's

Assurez-vous que vous n'existant pas la carte avant que le JavaScript ait fini de charger.

Également, si vous souhaitez utiliser le chargeur AJAX API, vous devez le faire comme ceci: P>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" type="text/javascript"></script>

Je l'ai fait comme si ... Cet exemple utilise JQuery et Google Map V3.x

$.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function () {});

function MapApiLoaded() {
    //.... put your map setup code here: new google.maps.Map(...) etc
}

Vous pouvez le faire. Vous pouvez ajouter un nom de fonction de rappel dans l'URL. Il sera appelé lorsque l'API est chargée. Cette fonction de rappel doit être accessible dans la portée du document.

Je l'ai fait cela il y a quelque temps en déclenchant un événement personnalisé sur la fenêtre avec JQuery: http://jsfiddle.net/fzqqw/5/ p>

utilisé " http://maps.google.com/maps/api/js?sensor=false&callback=gmapscallback " p>

window.gMapsCallback = function(){
    $(window).trigger('gMapsLoaded');
}

$(document).ready((function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    }
    function loadGoogleMaps(){
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }
    $(window).bind('gMapsLoaded', initialize);
    loadGoogleMaps();
})());​

Cela fonctionne pour moi:

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

    const parentElement = document.getElementById(`map`); // a <div>
    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);