Loading GMaps via ajax

Question

I'm loading a page containing a GMaps using the ajax() method of jQuery. The HTML page i'm loading is:

<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=MY_API_KEY" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
  if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map_canvas"));
   var geocoder = new GClientGeocoder();
   geocoder.getLatLng("San Francisco, California",function(point) {
    if (point) {
     map.setCenter(point, 7);
     }
    });
   map.setUIToDefault();
  }
 });
</script>
<div id="map_canvas"></div>

After retrieving this page, I'm setting its contents to a div using the html() method. The map is not showed, while other pages containing scripts, loaded in the same way, are correctly shown. Is this a specific issue about GMaps, that doesn't allow to be loaded via an ajax request?

Answer 1

If I remember correctly, the Google Maps API script will only work when included normally on the page; it will not work if it's added after the page is loaded, like you're doing.

Answer 2

Try using the google ajax loader code instead:

google ajax apis