無法動態加載谷歌地圖javascript

Question

下面告訴我 GMap2 沒有定義。 但是使用 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>

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. 使用谷歌 AJAX 加載器

既然您已經在使用 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>

Answer 2

你有沒有檢查瀏覽器是否兼容？ 我在所有 GMAP 應用程序中都這樣做，盡管它很少失敗......

if (GBrowserIsCompatible())