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:
