jquery - Cannot load google map javascript dynamically - Stack Overflow

admin管理员组

文章数量:1026989

The follow tells me that GMap2 is not defined. But the code that uses GMap2 is in the callback.

        $(function() {
        $('#sample').click(function() {
            $.getScript(";amp;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>

The follow tells me that GMap2 is not defined. But the code that uses GMap2 is in the callback.

        $(function() {
        $('#sample').click(function() {
            $.getScript("http://maps.google./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>

• javascript
• jquery
• google-maps

Share Improve this question Follow edited Jan 8, 2010 at 5:11 Doug Neiner 66.3k1414 gold badges110110 silver badges118118 bronze badges asked Jan 8, 2010 at 4:51 Shawn McleanShawn Mclean 57.5k9696 gold badges281281 silver badges412412 bronze badges 1

• 1 Yes, the OP has supplied an API key. I have removed it from the question and replaced it with API_KEY_HERE – Doug Neiner Commented Jan 8, 2010 at 5:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can go two ways with this:

1. Continue to use $.getScript:

It seems that you need both an async=2 parameter as well as a different callback structure for it to work. My answer is adapted to your code from this great walkthrough here.

<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./maps?file=api&amp;v=2&amp;sensor=true&amp;callback=map_callback&amp;async=2&amp;key=API_KEY_HERE");
       }
    }
</script>

2. Use the Google AJAX Loader

Since you are already using a Google Library, why not use their loader to help you out:

<script type="text/javascript" src="http://www.google./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>

Did you check the if the browser is patible? I do this in all my GMAP applications, although it rarely fails...

if (GBrowserIsCompatible()) 

The follow tells me that GMap2 is not defined. But the code that uses GMap2 is in the callback.

        $(function() {
        $('#sample').click(function() {
            $.getScript(";amp;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>

The follow tells me that GMap2 is not defined. But the code that uses GMap2 is in the callback.

        $(function() {
        $('#sample').click(function() {
            $.getScript("http://maps.google./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>

• javascript
• jquery
• google-maps

Share Improve this question Follow edited Jan 8, 2010 at 5:11 Doug Neiner 66.3k1414 gold badges110110 silver badges118118 bronze badges asked Jan 8, 2010 at 4:51 Shawn McleanShawn Mclean 57.5k9696 gold badges281281 silver badges412412 bronze badges 1

• 1 Yes, the OP has supplied an API key. I have removed it from the question and replaced it with API_KEY_HERE – Doug Neiner Commented Jan 8, 2010 at 5:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can go two ways with this:

1. Continue to use $.getScript:

It seems that you need both an async=2 parameter as well as a different callback structure for it to work. My answer is adapted to your code from this great walkthrough here.

<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./maps?file=api&amp;v=2&amp;sensor=true&amp;callback=map_callback&amp;async=2&amp;key=API_KEY_HERE");
       }
    }
</script>

2. Use the Google AJAX Loader

Since you are already using a Google Library, why not use their loader to help you out:

<script type="text/javascript" src="http://www.google./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>

Did you check the if the browser is patible? I do this in all my GMAP applications, although it rarely fails...

if (GBrowserIsCompatible()) 

本文标签： jqueryCannot load google map javascript dynamicallyStack Overflow