On my website i want to open a div in jQuery and show the route to a certain address with Google maps.
The problem is that for some reason my map won't load. If i go to the page directly it works, but if i open the page via jQuery i get an empty page. This is my code:
$("#showRoute").click(function(e){
e.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closeBox")).remove();
$("body").append('').append('');
$("#shadowContent").append('Sluit venster').append('');
$("#closeBox").click(function(c) {
c.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closeBox")).fadeOut(500);
});
$("#shadow").add($("#shadowContent")).fadeIn(500);
$("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
$("#content").load('route.php?from='+$("#routeFrom").val());
});
route.php
[.. HTML tags which also load google maps javascript file.. ]
function initialize() {
var latlng = new google.maps.LatLng(51.92475, 4.38206);
var myOptions = {zoom: 10, center: latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({position: latlng, map:map, title:"Cherrytrees"});
marker.setMap(map);
}
jQuery(document).ready(function () {
initialize();
});
[..]
<div id="map_canvas" style="width:600px;height:400px;"></div>
[..]
Is there some security reason or something like that that the maps won't load?