异步谷歌地图API V3不确定是不是一个函数 [英] Async Google Maps API v3 undefined is not a function

问题描述

我正在写一个手工打造的框架异步加载谷歌地图的应用程序。结果
当我打开地图就不会加载所有的它由于某种原因，我会用未捕获类型错误结束：未定义不是一个函数。我检查铬检查，并发现了 google.maps 是一个有效的对象，但它有没有自己的属性。我手动调用初始化函数的文件加载后良好。我在做什么错？！

解决方案

您不能与知名网址加载地图的API异步（<一个href=\"http://maps.googleapis.com/maps/api/js?v=3&sensor=false\">http://maps.googleapis.com/maps/api/js?v=3&sensor=false ）

当你看看这个脚本文件，你会看到，这是不是被加载的API，它是装载API加载器。装载机利用的document.write（），该文档已被加载后调用的时候是什么会导致你意想不到的效果。

的

此外，该文件不等待异步加载的对象的onload事件，它可能会太快。

您也不能使用脚本的负载事件调用初始化函数，因为火灾时，加载器加载，而不是地图的API。

做什么：结果
追加回调参数到脚本的URL（用初始化函数作为值的名称）

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

现在你会得到一个不同的装载机其中：

1. 不使用的document.write（）


2. 当调用地图的API已经被加载的回调函数（初始化）

演示：<一href=\"http://jsfiddle.net/doktormolle/7cu2F/\">http://jsfiddle.net/doktormolle/7cu2F/

---

相关注释：似乎回调有直接连接到窗口的功能。不冷静谷歌：）的

有另一种选择，支持的函数引用（而不是功能 - 使用谷歌的-API装载机名称）。

样品，其中异步加载地图的API，但只有当有一个与文件中的ID 地图画布元素，然后创建一个映射：

\r

\r

window.addEventListener（'负荷'，函数（）{\r
      如果（的document.getElementById（'地图画布'））{\r
        的google.load（地图，3，{\r
          回调：函数（）{\r
             新google.maps.Map（的document.getElementById（'地图画布'）{\r
                中心：新google.maps.LatLng（0,0），\r
                变焦：3\r
              }）;\r
          }\r
        }）;\r
      }\r
    }，FALSE）;

\r

体，HTML，＃地图帆布{\r
        高度：100％;\r
        保证金：0;\r
        填充：0;\r
        宽度：100％;\r
      }

\r

＆LT;脚本SRC =htt​​ps://www.google.com/jsapi ？.js文件＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV ID =地图画布＆GT;＆LT; / DIV＆GT;

\r

\r

\r

I'm writing an app that loads Google Maps asynchronously with a hand-built framework.
When I load maps it will not load all of it for some reason and I'll end up with a Uncaught TypeError: undefined is not a function. I checked chrome inspector and found out that google.maps is a valid object, but it has none of its own properties. I manually call the "initialize function" well after the document has loaded. What am I doing wrong?!

解决方案

You can't load the maps-API asynchronous with the well-known URL( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )

When you take a look at the script-file, you'll see, that this is not the API that gets loaded, it's a loader that loads the API. The loader makes use of document.write() , what will lead you to unexpected results when called after the document has been loaded.

Furthermore the onload-event of the document doesn't wait for asynchronous loaded objects, it may come too quick.

You also cannot use the load-event of the script to invoke the initialize-function, because when it fires, the loader is loaded, not the maps-API.

What to do:
append a callback-parameter to the script-URL(with the name of the initialize-function as value)

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

Now you get a different loader which:

1. doesn't use document.write()
2. calls the callback-function(initialize) when the maps-API has been loaded

Demo: http://jsfiddle.net/doktormolle/7cu2F/

---

Related to the comment: seems the callback has to be a function attached to window directly. not cool google :)

There is another option, the google-API-loader which supports the usage of function-references (instead of function-names).

Sample, which loads the maps-API asynchronously, but only when there is an element with the ID map-canvas in the document, and then creates a map:

    window.addEventListener('load',function(){
      if(document.getElementById('map-canvas')){
        google.load("maps", "3",{
          callback:function(){
             new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(0,0),
                zoom: 3
              });
          }
        });     
      }
    },false);

      body,html,#map-canvas{
        height:100%;
        margin:0;
        padding:0;
        width:100%;
      }

<script src="https://www.google.com/jsapi?.js"></script>
<div id="map-canvas"></div>

这篇关于异步谷歌地图API V3不确定是不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！