I have encountered an issue that I cannot seem to work out in regards to loading page content which contains a google map. Below is the index.php page containing the parent header and the google api information.
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<!-- Google Maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location-wedding"),
mapOptions);
}
</script>
<!-- Switch Layout -->
<script type="text/javascript">
$(document).ready(function() {
$('.Theme_Page').load("test.php");
});
</script>
</head>
<body onload="initialize()">
<!-- Page Change -->
<div class="theme_holder">
</div>
<div class="Theme_Page">
<!-- Content To Go Here -->
</div>
</body>
The page being loaded in is the following:
<div id="location-wedding" style="width:700px; height:250px"></div>
The problem is if the above div is within the index.php then the map is present, as soon as it place it in the to be loaded page it does not show at all. The reason as to why I am wanting it to be in the .load() page is because I’m going to use Jquery to change the contents on this page (with an onclick event)
Any help or guidance would be most appreciated.
Cheers Lee.
As yoda said your initialize function kicks in before load.php is loaded. so there will be no div where javascript can put map in instead of calling initialize function from body onload you should call this function in load.php ….. try this:: remove onload function from body and place following javascript code on load.php