Question

I have current code that loads my google map into a colorbox but I’d like to load it into a div tag that can be loaded into a colorbox from another page.

Here is my current colorbox code (works)

$.fn.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() { 
    $.getJSON('users.php', function(data){
        initialize();
        setMarkers(map, data);
    });
});

Here is my attempt at loading the same data into my div container (doesn’t work, returns a 403 error)

$('#map_container').load('users.php', function(data){   
    var jqxhr = $.getJSON(data);
    initialize();
    setMarkers(map, jqxhr);
});

Any idea why I’m getting a 403 error or have I missed something?

Answer 1

$(‘#foo’).load(‘users.php’) will load the data from users.php into the #foo div.

You want to do the .getJSON call with a callback, something along the lines of

jQuery.getJSON("users.php", {}, function(data, status) {
      initialize();  // should setup #map_container with a map with the maps API
      setMarkers(map, data);
});