Google Map Ajax load

Question

I am having "fun" with google maps and was after some assistance. Basically I have a small block of HTML/Javascript which can be loaded into a standard HTML page or into a div using Ajax. All I am attempting to do at present is get the map to appear. When the page loads as part of the HTML it is fine, appears, sings, dances and occasionally plays the flute. However when it loads via Ajax it doesn't appear, but the javascript google writes does.

I think I am missing a load or ready trigger. but can't find out what I am missing. My search-foo is weak. This is the code, not massively complicated as you can see. The google map includes have been left out, but there is no errors, or warnings, reported and as I say it works fine as a HTML page.

<div id="map_canvas_<?= $userContact->getId() ?>" style="margin: 10px auto; width: 90%; height: 300px;"></div>
<script type="text/javascript">

    var mapInstance = null;

    var startLatitude = 53.975044;
    var startLongitude = -2.153320;
    var startZoomLevel = 5;

// create the new instance.
    mapInstance = new GMap2($('map_canvas_<?= $userContact->getId() ?>'));

    // center the map on the UK
    mapInstance.setCenter(new GLatLng(startLatitude, startLongitude), startZoomLevel);

</script>

Khaine.

Answer 1

Have you tried passing the results from your AJAX call to javascript's eval() method? That will execute whatever javascript code that you are loading in from the other page.

If you are just loading your js using AJAX and adding it to a div, then the code won't automatically get executed.

Answer 2

I think you need to create your GMap2 instance etc. in a window.onload function. For example:

// ..other code stays the same
function initMap() {
    if (GBrowserIsCompatible()) { 
        mapInstance = new GMap2(..);
        mapInstance.setCenter(..);
    }
}
window.onload = initMap;

Hope that fixes your problem.