views:

45

answers:

1

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?

A: 

I would think that you can only load html, not javascript and expect it to execute as its loaded in dynamically.

rball
Hmm ok, have to find a workaround then! Thanks!
Maurice
What you should be doing is put the route.php contents on the page itself and hide it. If that page is dynamic somehow you need to have a template, and populate it with json data, then show it. What you are trying to do isn't possible and is also the "hard" way to do it anyway.
rball