无法动态加载Google地图JavaScript

Question

以下提示说明GMap2未定义。但使用GMap2的代码在回调函数中。

你可以尝试将Google Maps API的引入放到回调函数里面，以确保GMap2已定义。

        $(function() {
        $('#sample').click(function() {
            $.getScript("http://maps.google.com/maps?file=api&v=2&sensor=true&key=API_KEY_HERE", function() {
                var map = new GMap2(document.getElementById("mapTest"));
                map.setCenter(new GLatLng(18, -77.4), 13);
                map.setUIToDefault();

            });
        });
    });

<a id="sample">Click Me</a>
<div id="mapTest" style="width: 200px; height: 100px;"></div>

- Shawn Mclean

---

是的，OP已提供API密钥。我已将其从问题中删除，并用API_KEY_HERE替换了它。 - Doug Neiner

Answer 1

你可以选择以下两种方法之一： 1. 继续使用$.getScript：

似乎你需要一个async=2参数以及不同的回调结构才能使它正常工作。我的答案是根据这篇很好的指南来适应你的代码的。

<script type="text/javascript">
    function map_callback(){
        var map = new GMap2(document.getElementById("mapTest"));
        map.setCenter(new GLatLng(18, -77.4), 13);
        map.setUIToDefault();
    }

    $(function(){
       $('#sample').click(function(){
          $.getScript("http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;callback=map_callback&amp;async=2&amp;key=API_KEY_HERE");
       }
    }
</script>

2. 使用Google AJAX Loader

既然您已经在使用Google库，为什么不使用他们的加载器来帮助您：

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

   google.setOnLoadCallback(function(){
       $('#sample').click(function(){
          google.load("maps", "2", {"callback" : function(){
            var map = new GMap2(document.getElementById("mapTest"));
            map.setCenter(new GLatLng(18, -77.4), 13);
            map.setUIToDefault();
          } });
       });
   }, true); // Passing true, though undocumented, is supposed to work like jQuery DOM ready
</script>

- Doug Neiner

---

谢谢，我尝试了两种方法并决定坚持使用jQuery，因为Google Ajax加载器会额外增加16kb的大小。 - Shawn Mclean

@Shawn 很高兴它对你有用！只是让你知道，它未压缩时为16kb，但从Google服务器发送时已经压缩，所以只有5.8k。 - Doug Neiner

Answer 2

你检查了浏览器是否兼容吗？在我所有的GMAP应用程序中都这样做，尽管很少出现失败情况...

if (GBrowserIsCompatible()) 

- Sparky

---

它根本找不到脚本。它还告诉我该函数不可用。 - Shawn Mclean

基于两个函数都出现错误，听起来像是脚本未加载错误，但看起来Doug已经帮助了你。祝你的应用程序好运... - Sparky