Embed Google Map in Colorbox

[neodjandre]

Hey all,

Using the following code to embed Googlemaps within colorbox but with no success.

I have tried quite a few variations but still I only get a blank window. Google maps doesn't load at all...

thanks in advance,
Andy

  jQuery(".fmap").colorbox({
    html:'<div id="map_canvas_all" style="width:730px; height:550px;"></div>',
    scrolling:false,
    width:"750px",
    height:"570px",
    onComplete:jQuery(function(){ loadScriptGeneral(); })
  });

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

jQuery(function initializeGeneral() {
  var imageG = new google.maps.MarkerImage('/images/pin.png',
      new google.maps.Size(20, 26),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 26)
  );

  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: "aaa",
      icon: imageG
  });
});