Embed Google Map in Colorbox

Embed Google Map in Colorbox

Hey all, I am using the following code to embed Google Maps in Colorbox but i am getting this error in Firebug console:

TypeError: window.initializeGeneral is not a function

not sure what's wrong here.. any ideas?

thanks in advance for your help
Andy

  1.   jQuery(document).ready(function() {
  2.      
  3.   jQuery(".fmap").colorbox({
  4.     html:'<div id="map_canvas_all" style="width:730px; height:550px;"></div>',
  5.     scrolling:false,
  6.     width:"750px",
  7.     height:"570px",
  8.     onComplete:function(){ loadScriptGeneral(); }
  9.   });
  10. function loadScriptGeneral() {
  11.   var script = document.createElement("script");
  12.   script.type = "text/javascript";
  13.   script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initializeGeneral";
  14.   document.body.appendChild(script);
  15. };
  16. function initializeGeneral() {
  17.   var imageG = new google.maps.MarkerImage('http://www.betaaa.com/images/pin.png',
  18.       new google.maps.Size(20, 26),
  19.       new google.maps.Point(0, 0),
  20.       new google.maps.Point(0, 26)
  21.   );
  22.   var myLatlngG = new google.maps.LatLng(35.518421,24.018758);
  23.   var myOptionsG = {
  24.       zoom: 16,
  25.       center: myLatlngG,
  26.       mapTypeId: google.maps.MapTypeId.ROADMAP
  27.   }
  28.   var mapG = new google.maps.Map(document.getElementById("map_canvas_all"), myOptionsG);
  29.  
  30.   var markerG = new google.maps.Marker({
  31.       position: myLatlngG,
  32.       map: mapG,
  33.       title: "aaa",
  34.       icon: imageG
  35.   });
  36. };
  37. });