1

Well I've been working on this for a while, but i still have no response..

What I am trying to do, is load a googlemap with an ajax no refreshing menu. So here is the main page which loads all of the menu pages, i'm gonna call main.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>

<ul id="nav">
    <li><a href="page_main">Main</a></li>
    <li><a href="page_weather">Weather</a></li>
    </ul>


    <div id="content"></div>


    <script>
    $(document).ready(function(){
        //initial
        $('#content').load('menu/page_main.php');

        //handle menu clicks
        $('ul#nav li a').click(function() {
            var page = $(this).attr('href');
            $('#content').load('menu/' + page + '.php');
            return false;

        });

    });

    </script>

And here is the page with the map, let's call page_weather.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>

<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-15.869167, -47.920834),
          zoom: 3,
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
        }



      google.maps.event.addDomListener(window, 'load', initialize);
</script>

<h1>Principal</h1>

</br>
</br>

<body onLoad="initialize()">

<div id="map_canvas" style="width:800; height:400;"></div>

When page_weather.php is loaded directly in the browser, the map loads properly, but when the page is loaded using the ajax no refreshing menu, i only get a 800x400 white box.

How i can fix this?

Already tryed:

Executing <script> inside <div> retrieved by AJAX

Can scripts be inserted with innerHTML?

Community
  • 1
  • 1
Ygor Montenegro
  • 659
  • 1
  • 12
  • 26

2 Answers2

0

jQuery will in fact take care of executing <script> tags for you via jQuery.load(). Your problem lies in the fact you are using the window.load event to initialize the google map. This event will never be triggered if you inject this script into the document after the initial window load.

I'd have a better workaround if google maps didn't insist on a window.load event rather than the dom ready event like most libraries. But since your initialize() function is a global function, you should simply be able to change your load call to this:

$('#content').load('menu/page_main.php', function () {
    initialize();
});

By the way, remove the onLoad="initialize()". You already have the window.load event being set by the google.maps.event.addDomListener(window, 'load', initialize); line.

0

The event is generated before function and it does not recognize, you put this code:

$(window).load(function(){
google.maps.event.addDomListener(window, 'load', initialize); 

});
borchvm
  • 3,533
  • 16
  • 44
  • 45