动态加载谷歌地图 api答案

【问题标题】：Dynamically Loading Google Maps api's动态加载谷歌地图 api
【发布时间】：2009-09-09 09:53:18
【问题描述】：

我正在尝试动态加载谷歌地图 api。我正在使用以下代码：

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.google.com/jsapi?key=<MY_KEY>;
head.appendChild(script);

但是在尝试创建地图时

map = new GMap2(document.getElementById("map"));

或

map = new google.maps.Map2(document.getElementById("map"));

我收到一个错误，即 google（或 GMap2）未定义。

【问题讨论】：

你好克里斯，我也遇到了同样的问题，你有什么解决办法吗？
找到适合您需求的答案了吗？

标签： google-maps dynamic

【解决方案1】：

这对我有用：

    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);

【讨论】：

如果我希望地图在按钮点击时显示，我应该使用哪一种？

【解决方案2】：

你可以这样做。您可以在 url 中添加回调函数名称。加载 API 时将调用它。该回调函数必须在文档范围内可访问。

我前段时间通过使用 jQuery 在窗口上触发自定义事件来做到这一点：http://jsfiddle.net/fZqqW/5/

使用“http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback”

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();
})());

异步加载 API

您可能希望在您的页面加载后加载 Maps API JavaScript 代码完成加载，或按需。为此，您可以注入自己的响应 window.onload 事件或函数调用的标记，但您需要另外指示 Maps JavaScript API 引导程序延迟应用程序代码的执行，直到 Maps JavaScript API 代码已完全加载。您可以使用回调来执行此操作参数，它将要执行的函数作为参数完成加载 API。

以下代码指示应用程序加载 Maps API 页面完全加载后（使用window.onload）并编写将 JavaScript API 映射到页面内的标签中。此外，我们指示 API 在之后只执行 initialize() 函数通过将 callback=initialize 传递给地图，API 已完全加载

请看这里：https://developers.google.com/maps/documentation/javascript/tutorial

【讨论】：

当我这样做时，我收到此错误“未处理的 Promise Rejection: TypeError: null is not an object (evalating 'a.firstChild')”
@Alex Stewart 看到这个答案stackoverflow.com/a/12602845/1491212

【解决方案3】：

确保在 Javascript 完成加载之前您没有实例化地图。

另外，如果你想使用 AJAX API 加载器，你需要这样做：

<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script>
<script type="text/javascript">
    google.load("maps", "2.x");

    // Call this function when the page has been loaded
    function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
    }
    google.setOnLoadCallback(initialize);
</script>

否则，只需使用常规 Maps API 脚本源：

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

【讨论】：

【解决方案4】：

我已经这样做了......这个例子使用jQuery和谷歌地图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
}

【讨论】：