Placing a Google map in Colorbox
If you want to dynamically insert the Google Map, instead of simply linking to an href, you can do as follows:

In your HTML, have the basic outline for the colorbox ready:

&lt;div id="box"&gt;
    &lt;div class="google-map"&gt;&lt;/div&gt;
&lt;/div&gt;


Then, when you invoke your colorbox, invoke it with an html option:

$("#farm_on_google_maps").colorbox({
            inline: true,
            width:700,
            height:450,
            html : $("#box").html()
            });


This will setup your colorbox with the basic HTML structure. We then want to insert the google map dynamically into the colorbox as follows:

var googleMap = $("#cboxLoadedContent").find("div.google-map")[0];
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(googleMap, myOptions);


The cboxLoadedContent div is created by the colorbox when it's invoked, so it's simply a matter of grabbing that, and using it to setup the Google Map.