Can I load a jquery colorbox from a remote page?

I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:

//  show_map.php

jQuery(document).ready(function(){

    $.colorbox({width:"643px", height: "653px", inline:true, href:"开发者_开发知识库#map_container"}, function() { 
        $.getJSON('map.php', function(data){
            initialize();
            setMarkers(map, data);
        });
    });
});

Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?

$(document).ready(function() {

    $('.show_map').click(function() { 
        $.get("show_map.php", function(data) {
          //  alert(data);
    })
});

If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):

$(document).ready(function() {
    $('.show_map').click(function() {
        $.colorbox({
            href: "show_map.php",
            width:"643px",
            height:"653px"
        });
    })
});

You can also load any external page if you add the iframe: true option to that code.

Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.

$(document).ready(function() {

    $('.show_map').click(function() { 
          $('.some-element').load("show_map.php");
    })
});

EDIT: a better approach have the colorbox inline instead. Saves a round trip to the server.

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