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