Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I need to place a Google map in Colorbox overlay and wonder 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.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.