Question

    <script type="text/javascript"> 
    $(document).ready(function() {
    $('#tab_menu a').click(function(){
    $('html, body').animate({scrollTop: '201px'}, 400);
    $("#ajax").empty().html('<div style="text-align:center;width:950px;height:100px;background:url(/images/white.gif) repeat-y;"><table align="center" border="0"><tr><td width="950" align="center"><img src=/images/loading.gif align=absmiddle /><br/>Loading map...</td></tr></table></div>');
    $('#ajax').slideDown('slow', function() {
    $('#ajax').load('/inmap.php?=<?=$h?>');
            });
            });
        });

</script>

when inmap.php is called individually it renders the map fine. But with the code above, map does not show.

I can call any other page I want without a problem. Whats wrong with the code ?
Note: it still does not show when <?=$h?> is removed.

Answer 1

The URL generated by $(‘#ajax’).load(‘/inmap.php?=’); would be /inmap.php?=<?=$h?>. I guess what you’re trying to do is the following:

$('#ajax').load('/inmap.php?=' + h);

However, there’s no variable called h. So removing that part is probably what you should do.

I’m pretty sure that the problem is that Google Maps JavaScript API should be loaded in the file that’s loading the map, you can’t inject a <script>-tag and expect the external JavaScript file to be included, because it won’t. I would recommend using an iFrame for this. You would then end up with a code that looks something like this:

$(document).ready(function(){
    $("#tab_menu a").click(function(){

        $("#ajax").html('<iframe name="google_maps_iframe" height="100" width="950" src="inmap.php"></iframe>');
    });
});