Placing a Google map in Colorbox

Question

I need to place a Google map in Colorbox overlay and am wondering if there's a better way to do this. I've just started out with Google's tutorial so there's nothing fancy going on.

Right now I'm hiding the div that Google loads the map into:

<div style="width:0; height: 0; overflow: hidden;">
    <div id="map_canvas" style="width:600px; height:400px; "></div>
</div>

Here's the call to Colorbox:

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(document.getElementById("map_canvas"), myOptions);


$(document).ready(function(){

    $("#farm_on_google_maps").colorbox({
        inline: true,
        width:700,
        height:450,
        href : '#map_canvas'
        });
});

Even though it works, I wonder if the map could be loaded directly into Colorbox.

Answer 1

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:

<div id="box">
    <div class="google-map"></div>
</div>

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.

Answer 2

Nothing easier than this:

<a href="URLTOMAP" class="colorbox">Map</a>

$(document).ready(function(){
$(".colorbox").colorbox({ rel:'colorbox' });
});

Does exactly what it says on the tin.