Primecut

Hello,

Any time I needed a lightbox effect for my projects I end up with colorbox.

It’s  really easy to install it to your project, stable and not really heavy, supports all normal functionality and follows W3C standards.

So while working on a new project Pallas restaurant which I am going to provide you more information in a later post, I needed a lightbox plugin which allow me to use Google maps within it. The question is how Lightbox and Google maps come together?  Have a look on the script below.

$(document).ready(function () {
  $(".fMap").colorbox({
    html:'<div id="map_canvas_all" style="width:600px; height:450px;"></div>',
    scrolling:false,
    width:"600px",
    height:"470px",
    onComplete:function(){ loadScriptGeneral(); }
  });

});

That is the main load function where “.fMap” is the link to open the Google maps.
My example also has custom images as markers on the map.  As you can see it includes two pngs one for the marker one for the shadow of it. It’s even simpler if you don’t need any custom marker icon.

function loadScriptGeneral() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initializeGeneral";
  document.body.appendChild(script);
};

function initializeGeneral() {
  var imageG = new google.maps.MarkerImage('/media/imgs/google.png',
      new google.maps.Size(20, 26),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 26)
  );
  var shadowG = new google.maps.MarkerImage('/media/imgs/shadow.png',
      new google.maps.Size(23, 30),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 30)
  );
  var myLatlngG = new google.maps.LatLng(35.518421,24.018758);
  var myOptionsG = {
      zoom: 16,
      center: myLatlngG,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapG = new google.maps.Map(document.getElementById("map_canvas_all"), myOptionsG);

  var markerG = new google.maps.Marker({
      position: myLatlngG,
      map: mapG,
      title: "Παλλάς",
      shadow: shadowG,
      icon: imageG
  });
};

The first piece of script “loadScriptsGeneral” loads the general Google maps script. Once it’s loaded callback the “initializeGeneral” function. At the end you place the Google map object to the “map_canvas_all” div which we created at the biggining of the script above.

It’s a really simple method to add you google maps to your site within a lightbox effect. I hope it helps some of you and please post any additions or recommendations.